The Yahoo UI Library provides a nifty helper for creating tooltips. I started playing around with it when I wanted to add the same tooltip to a large number of elements on a page. What got me interested in this implementation, is the ability to use the same tooltip on a number of elements, rather than having each element have it’s own tooltip div, or implementation.
The tooltip library creates a div element for each tooltip when the document loads. I wanted to use the tooltip to display a larger version of an image when a user hovered their mouse over a thumbnail. I did not however want to load all the full sized images when the page loads.
I decided the best way to handle this task was to implement my own tooltip function and create my own panel.
Library Installation
The library has a few Yahoo UI Dependencies:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.3.1/build/container/assets/container.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/container/container-min.js"></script>
Next, you’ll need my tooltip and css files. You can download them here. After the Yahoo dependencies, just add the css and javascript files from my library:
<link href="/css/yh_tooltip.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="/javascript/yh_tooltip.js" ></script>
Usage
The library is pretty easy to use.
-
Create a div that has the content of your tooltip.
The Div needs a unique ID. You can, however, use the same div for a number of tooltips. For example, if you have repeating content that has the same tooltip in each section, you don’t have to repeat the tooltip div. Just put one tooltip at the bottom of the page instead. You can actually put the tooltip divs anywhere in the HTML document. The tooltip library is agnostic as to their location.
Give the div “tooltip” class. This simply hides the element from the browser while it isn’t being displayed.
<div id="some_tooltip" class="tooltip">
Here is the tooltip content <br />
You can have any html in here you want.
</div>
-
Add the tooltip function to your element.
Now, to have an element display your tooltip, you simply add the createTip function to your element. The parameters are the element (this) and the name of the div that contains your tooltip.
<a href="somewhere" onmouseover="createTip(this,'some_tooltip');">A link with a tip</a>
There is an extra parameter that tells whether or not to display the header for the tooltip. Just pass false if you don’t want a header. You can also redefine the header style to suit your needs.
<a href="somewhere" onmouseover="createTip(this,'some_tooltip',false);">A link with a tip</a>
Here is an example.
Same tooltip but no header.
Put whatever in the div you like.
| Like | Tables |
Photo Loading
Now that I’ve got a pretty good HTML tooltip library, I can enhance it to display the images like I want. Here are the thumbnails for four featured images from MyDrawings.com (A site I built.):
Now, I want to show the full image when you hold your mouse over one of the images. The tooltip library works just fine for this. If you don’t mind loading the full image when you load the html page, you could simply create tooltip divs with the images and then use the tooltip function as described above.
There is a little problem with that approach. Lets say you have a page that has a lot of images. Loading the full images for all those thumbnails would not only make the page render quite slowly but would put a lot of unneeded strain on the web server. Here is what I did to only load the images when they are requested. The idea is that when the tooltip is requested, dynamically create a tooltip div with the real image. Immediately populate a temporary image with a photo loading image, and then when the photo has loaded, replace the loading image with the real image. The following code isn’t part of the tooltip library because it is pretty custom to this specific need. You can copy it and modify it to suit your needs if you like though.
var next_photo_id=0;
var photo_urls={};
var imgLoading=new Image();
imgLoading.src='/some/url/for/a/loading/image.jpg';
function createPhotoTip(elem,url) {
if (!yh_tt || !elem || elem.tt_div ) return ; // already initialized or not ready to initialize yet.
var photo_id=photo_urls[url];
if (!photo_id) {
photo_id=++next_photo_id;
photo_urls[url]=photo_id;
}
if ( !Dom.get('photo_tooltip_for_'+photo_id)) {
var i;
i=new Image();
i.src=url;
var d=document.createElement ( 'div' );
d.className='tooltip';
d.id='photo_tooltip_for_'+photo_id;
var img=document.createElement ( 'img' );
img.id='photo_for_'+photo_id;
img.src=imgLoading.src;
d.appendChild(img);
document.body.appendChild(d);
if (!i.complete) {
Event.on ( i, 'load', function(e) {
Dom.get('photo_for_'+photo_id).src=i.src;
} );
} else {
img.src=i.src;
}
}
createTip ( elem, 'photo_tooltip_for_'+photo_id, false );
}
Now, I just use my createPhotoTip function with the mouseover instead of the createTip Function
This gives me a good opportunity to showcase a nice little feature about the tooltip library too. ou scroll these images to close to the bottom of your browser, you’ll notice that the tooltips will reposition themselves appropriately so they are withing the viewable area.
Enjoy! Feel free to comment if it isn’t quite working or you notice something I could have done a lot better. Those are pretty cool drawings aren’t they!
More great stuff — thanks, Dennis!
I’m trying to use this on a site that I’m buidling. It’s really nice – I appreciate your creating it. One thing though – in IE6, my installation is not resizing the image correctly after the SRC value is changed (after the image has finished downloading). For instance, if my loader.gif is 32×32, the large size image remains that way. I have seen a bug like this before where IE has trouble resizing images if you leave out a width or height, but I believe it should redraw the image completely if both are left out.
Let me know what you think – Ive set the loading image URL to your loading image just to be sure it wasnt a JPEG/GIF redrawing type thing.
http://www.dylanbutler.com/client/mapmashup/
(Find a listing with photos and mouse over one)
Thanks in advance
Looks like I have a slightly updated version I was using in production.. I think I ran across the same error. Here is what I did to fix it:
replace the whole if (!i.complete) block with the following and see if that also solves your problem:
var i=new Image();
Event.on ( i, ‘load’, function(e) {
img.src=i.src;
img.width=i.width;
img.height=i.height;
} );
i.src='<the path to your photo>’;
Funny I did the same thing pretty much line for line on mine before reading your comment:
if (!i.complete) {
YUE.on ( i, ‘load’, function(e) {
var img = YUD.get(‘photo_for_’+photo_id);
img.src = i.src;
img.width = i.width;
img.height = i.height;
} );
} else {
img.src = i.src;
img.width = i.width;
img.height = i.height;
}
This is jeyaseelan.Thank you for your great guidance…Where shall i put u recommented code?
please reply me….
Thank you for ur time consideration
You can use the code wherever you’d like the effects for your images. Just follow the instructions above for each page you want to have image overlays on.
Thank you for your kind reply,
I explain about i did show below
1.I selected one image for preview named as ‘image1.jpg’ and id is ‘img’
2.i paste your JS and css 5 links in the head tage of Html that links are container.css,event.js,container-min.js,yh_tooltip.css,yh_tooltip.js.
3. I paste createPhotoTip script code also in the haed.
I modified only the imgLoading.src=’images/image1.jpg’;in the createPhotoTip script.
4.image html tage is
please give the solution…what is wrong in that code..
I waiting for your reply
please tell me what are changable tags or elements in the createPhotoTip script..
Please help me..]
advance Thank u for ur kind reply
Perhaps if you post the page your working on, someone can take a look to see what the problem you’re having is.
ya..Thank you dennis, again i tried it working smoothly..Thanks a lot ..
Hi, Dennis,
Great work! I have tried your code and i have a question for you. I am wondering if it is possible to change the width of the toop_tips (or if I want to have a fixed width 250px). Thanks in advance!
Check the yh_tooltip.css file. You can tweak the tooltip class and the .tt_header class to have a width I’d think. I imagine with a little tweaking, you’ll be able to find the look you’re after.
Thanks!
the example is not good. Here no have good tutorial how we can do it. By
Everyones tooltip needs are different. Under the Usage header does give you an example of exactly how you can do it. The 3rd part simply shows a way to customize it for a specific usage. You’ll have to provide your own customization if you have a specific usage. For most people, steps 1-2 above the photo loading example should be sufficient though.
Hi, I hope you can help me out on this.
I appended the createPhotoTip function into the yh_tooltip.js and managed to create the tooltip.
However, I was testing with a 1024×768 jpg image, and the tooltip image on screen is very small, about 1cm x 1cm.
How do I adjust the size?
Thank you.
hey thank u very much
Can somebody help me with resizing? No news from webmaster so far….
Did you include the style file? Do you have firebug installed in FireFox? If so, you can look at the styles of the tooltip that is created and manually adjust them as necessary to get what you want.
This is excellent piece of code. I have used it, but I have some problem when I have larger Images.
In IE, these images don’t show up to their full size, and therefore the Image looks distorted.
But the same page when viewed in foreFox looks perfect.
Here’s my javasciprt:
function createPhotoTip(elem,itemId) {
if (!yh_tt || !elem || elem.tt_div ) return ; // already initialized or not ready to initialize yet.
if ( !Dom.get(‘photo_tooltip’ + itemId)) {
var i;
i = new Image();
i.src = “${pageContext.request.contextPath}/viewThumbNail?objectId=” + itemId;
var d = document.createElement ( ‘div’ );
d.className=’tooltip’;
d.id = ‘photo_tooltip’ + itemId;
var img = document.createElement ( ‘img’ );
img.id = ‘photo_for_’ + itemId;
img.src = imgLoading.src;
d.appendChild(img);
document.body.appendChild(d);
if (!i.complete) {
Event.on ( i, ‘load’, function(e) {
var img = Dom.get(‘photo_for_’ + itemId);
img.src = i.src;
img.width = i.width;
img.height = i.height;
} );
} else {
img.src = i.src;
img.width = i.width;
img.height = i.height;
}
}
createTip ( elem, ‘photo_tooltip’ + itemId, false );
}
Any help will highly be appriciated.
Hm, you might try double checking styles for your tooltip. I need to update this post with new pictures since my example site no longer exists.