Scott on Writing

Rich Tooltips With jQuery

I was recently working on an application and needed the ability to present the user with a list of links when they hovered over a particular line of text. HTML elements include a title attribute that, when set, displays the attribute's value in a small yellow window when the user hovers over the element. Problem is, the tooltip is a text-only interface. There's no way to embed a hyperlink or image or other rich markup into the tooltip.

Since we are using jQuery in this project I spent some time exploring various techniques for implementing rich tooltips in jQuery. Specifically, I needed a solution that met the following criteria:

• The tooltip would appear near or next to the text that the user was hovering over, and not on some fixed, predefined spot on the screen.
• I could, from server-side code, specify what elements would display tooltips when hovered over.
• I could, from server-side code, customize the tooltip message.
• The tooltip could include any sort of HTML markup I wanted to throw into it - links, images, etc. - and the user could interact with this markup (click on a link, for instance).
• The tooltip would remain displayed for a specified amount of time (say, 500 milliseconds) after the user moused off of the element that displayed the tooltip.

Unfortunately, I was unable to find a pre-built solution that would meet our needs, so I created my own, which I'd like to share now.

Please keep in mind that I know just enough JavaScript to shoot myself in the foot. Also, my experience with jQuery is limited, to be kind.

In order to display rich tooltips using my approach you need to do three things.

First, add the following CSS to those pages that use the rich tooltips:

.skmTooltipHost
{
 cursor: help;
 border-bottom: dotted 1px brown;
}

.skmTooltipContainer
{
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 3px;
    padding-bottom: 3px;
    display: none;
    position: absolute;
    background-color: #ff9;
    border: solid 1px #333;
    z-index: 999;
}

Those elements that should display a tooltip when hovered over need to use the skmTooltipHost class. The skmTooltipContainer class defines the styles for the tooltip itself.

Next, add the following $(document).ready function to your page (and add a script reference to the appropriate jquery.js file, if you haven't already):

<script type="text/javascript">
  $(document).ready(function() {
     $(".skmTooltipHost").hover(
       function() {
       $(this).append('<div class="skmTooltipContainer">' + $(this).attr('tooltip') + '</div>');
  
       $(this).find('.skmTooltipContainer').css("left", $(this).position().left + 20);
       $(this).find('.skmTooltipContainer').css("top", $(this).position().top + $(this).height());
        $(".skmTooltipContainer").fadeIn(500);
      },
 
       function() {
        $(".skmTooltipContainer").fadeTo(500, 1.0, function() { $(this).remove(); });
       }
     );
  });
</script>

Finally, decorate those HTML elements that you want to display a tooltip with the skmTooltipHost class and add an attribute named tooltip that contains the content to display in the tooltip. For example, imagine I had a document with the following markup:

<p>ASP.NET simplifies the process of creating dynamic web applications!</p>

I could turn add a tooltip to the text “ASP.NET” by adding the additional markup:

<p><span class="skmTooltipHost" tooltip="ASP.NET was created by Microsoft in 2001.">ASP.NET</span> simplifies the process of creating dynamic web applications!</p>

To get rich markup in the tooltip attribute you'll need to escape the <, >, and " characters with &lt;, &gt;, and &quot;, respectively. For instance, we could add a hyperlink in the above tooltip like so:

<p><span class="skmTooltipHost" tooltip="ASP.NET was created by Microsoft in 2001. Learn more at &lt;a target="_blank" href=&quot;http://www.4guysfromrolla.com/&quot;&gt;4GuysFromRolla.com&lt;/a&gt;!">ASP.NET</span> simplifies the process of creating dynamic web applications!</p>

You can see these rich tooltips in action here - http://scottonwriting.net/sowBlog/CodeProjectFiles/JQueryTooltipDemo.htm

And lastly, to do this programmatically from server-side code, you would add a Label Web control to your page named, say, lblASPNET. You'd set its CssClass property to skmTooltipHost. To set its tooltip attribute add the following (untested) code to the Page_Load event handler:

lblASPNET.Attributes.Add("tooltip", Server.HtmlEncode("ASP.NET was created by Microsoft in 2001. Learn more at <a target="_blank" href="http://www.4guysfromrolla.com/">4GuysFromRolla.com</a>!")

posted @ 3:17 PM | Feedback (6)