A simple Formatted ToolTip text on hover

The task was to add a formatted “ToolTip” message when hovering on a “More” link.  On a certain report, some of the names got pretty long.  Instead of wrapping text on the report, the desire was to simply truncate the name, then allow the user to see the entire name by hovering over the “More” link.  However, we wanted more than just the built-in ToolTip look.

I’ve seen JavaScript implementations of this, but I was looking for a simpler solution.  This is what I came up with:

The Mark-up

    <%# (Eval("Name").ToString().Length > 65) ? Eval("Name").ToString().Substring(0, 60) + "..." : Eval("Name")%>
        <a href="#"><%# (Eval("Name").ToString().Length > 65) ? "More" : "" %></a>


.showonhover .hovertext { display: none;}
.showonhover:hover .hovertext {display: inline;}
a.viewdescription {color:#999;}
a.viewdescription:hover {background-color:#999; color: White;}
.hovertext {position:absolute;z-index:1000;border:1px solid #ffd971;background-color:#fffdce;padding:11px;width:150px;font-size: 0.75em;}


The key is the first two lines of the CSS, specifically hiding the .hovertext node until the mouse hovers over the .showonhover node.  This is a pretty simple solution, but it wasn’t immediately apparent to me, so I thought I’d share it with others who may have the same initial mental block that I had.

2 Responses to “A simple Formatted ToolTip text on hover”

  1. Ryan Wheale Says:

    Seems like a neat solution, but your markup does not include the class names corresponding to your CSS styles. I can put 2 and 2 together, but others might not be able to figure out what’s going on.

    You would be even cooler to include some progressive enhancement in there. Perhaps the browsers that are capable should enjoy some nice CSS animations.

    .showonhover {position: relative;}
    .showonhover .hovertext {
    opacity: 0;
    top: -99999px;
    border:1px solid #ffd971;
    font-size: 0.75em;
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    .showonhover:hover .hovertext {opacity:1;top:0;}
    a.viewdescription {color:#999;}
    a.viewdescription:hover {background-color:#999; color: White;}

    Justin Chan…

    Justin Chancellor

    (Note: I put the “showonhover” class on the DIV so that you can hover over the entire name and get the effect)

  2. Ryan Wheale Says:

    Ahhh… you comment box does not encode html characters. Here’s the markup that should have gone at the bottom of my last comment:

    (hope this works)

    <div class="showonhover">
    Justin Chan…
    <a href="#" class="viewdescription">More</a>
    <span class="hovertext">Justin Chancellor</span>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: