A couple of weeks ago I mentioned that I had built a tooltip using jQuery. We focused mostly on the positioning of the tooltip at the time because, historically, that’s where most of the work has been.
But there are other time-saving features that also make the tooltip code I wrote a lot more flexible.
First, if you need the tooltip on multiple pages, you need to include the HTML on multiple pages. You could, of course, use master pages in ASP.NET or includes of some sort in other web development languages to get around this, but the fact remains that you still need to do this.
Second, the HTML is not as modular as it might be. This isn’t as big of an issue, since we could argue that most of our HTML is not as modular as it might be, but when I show you how you can overcome this with jQuery, I think you will recognize the improvement.
The other thing you’ll want to do is to dynamically create the positional DIV that you will use to hold the tooltip. This is another place where we typically had to put the content in our HTML page. Instead we will put this information in the jQuery script. While I could have included this in the fragment, doing it this way actually makes coding the tooltip easier:
$('<div id="tooltip"></div>').appendTo('body'); $('#tooltip').hide().load('js/ToolTip.htm');
Two lines of code to get our shell of a tooltip in the page.
The first line creates the HTML fragment and appends it to the end of the elements inside the body tag.
The second line retrieves the DIV element we just inserted, hides it, and then loads the HTML fragment that represents our tooltip.
Finally, to get content into the tooltip, we use the HTML property. I created a class called toolTipCenter that is the location where the tooltip content will go. To insert content for the tooltip, all you need to do is:
$('#tooltip .toolTipCenter').html('Tooltip Content Here.');
Other post in jQuery
- jQuery, bgiframe and IE6 z-order hacks - February 19th, 2009
- jQuery - Using Slider as a Scrollbar - March 12th, 2009
- jQuery - Auto Scrolling the Slider - March 23rd, 2009
- jQuery Progressbar - May 20th, 2009
- jQuery Dialog – With Validation Controls - June 25th, 2009
- jQuery – Date Picker - July 2nd, 2009
- jQuery Splitter - July 21st, 2009
- jQuery, Each() and Async Gets - December 2nd, 2009
- Host jQuery at Google (with Intellisense support) - December 4th, 2012
- jQuery - Loading Partial Content - January 29th, 2013
- jQuery, JSON, and ASP.NET - September 4th, 2013
- jQuery Expand/Collapse Using Head Tags - September 25th, 2013
- jQuery - Events - November 6th, 2013
- jQuery - Retrieving HTML Fragments - November 20th, 2013