Foliotek Development Blog

A simple Formatted ToolTip text on hover

by John Pasquet

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

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

 

The CSS


.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;}

Comment

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.

Tags: , , ,

« »

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;
    position:absolute;
    z-index:1000;
    border:1px solid #ffd971;
    background-color:#fffdce;
    padding:11px;
    width:150px;
    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…

    More
    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…
    <span>
    <a href="#" class="viewdescription">More</a>
    <span class="hovertext">Justin Chancellor</span>
    </span>
    </div>

Leave a Reply