Finding a Javascript Tool Tip Script
Have you ever felt constrained by a lack of control over the browsers default tool tip? Wishing for something a little more customizable?
Well, me too. So, not long ago I tired finding a simple and unobtrusive Javascript tool tip that could easily be added to html link elements and completely be controlled with CSS. Not wanting to recreate the wheel I was hoping to use one of the following solutions for my needs; DOM tooltip, CSS Tool Tips, Pure CSS Tooltips, or Tipster. To my dismay upon further investigation none of these solutions really ended up fitting the bill. They were either too complex, too simple, or well, too much code for what I was trying to accomplish. I’m not saying they’re not great solutions, because they are. I was just looking for something very specific.
What I wanted was a tool tip that could be added to <a> element unobtrusively by adding a class value to the <a> element. As well, I wanted to have a customizable tool tip message for each link element on a web page. This was done by having the tool tip message pull from the specific title attribute of the <a> element that the tool tip was added too. So to add a tool tip message to an <a> element one would simply add the correct class value (class=”addToolTip”) and title value (title=”Your Message”). I have a working example with all the CSS, XHTML, and Javascript in one html document if you would like to dive into the nuts and bolts of the script.
If the mouse pointer changes to a hand when you roll-over an image associated with a story the image upon clicking either links to enlarged version of the image or a website associated with the image.
While I think I like it for the most part, aren’t there some accessibility issues with throwing markup into the title text?
As you have it:
Before You Click…The link your about to visit is not controlled, maintained, or approved by codylindley.com
Wouldn’t a screen reader read that something like this:
Less than symbol div id equals tooltiptextwrap before you click…
Let me know if I’m way off there. Anyway, sorry if that was too nitpicky. It’s a nice solution.
And by the way, your comment preview isn’t exactly accurate. It displayed my comment correctly there (specifically the code portion), but didn’t post that way.
As it was, there was a div with a class name of “ToolTipTextWrap” surrounding the “Before You Click…”, followed by p tags surrounding the rest of it.
Hopefully that makes more sense when you read my comments there.
I’m not sure, but that is a good point. Your likely right, its not the most accessible solution. I guess a person could skip adding the markup in the title attribute if they needed. Anyway, nice catch.
Looks very nice, and unobtrusive as well. With good seperation of html and js. Have you also looked at the ‘sweet titles’ from Dustin Diaz?
@Matthijs – Thanks. And yes, I've noticed several great scripts from Dustin Diaz.
If you are a fan of prototype and scriptaculous you might want to check out tooltip.js. Keep in mind however that this solution comes with additional code not pertaining specifically to the tool tip. In other words you’re using a code library. Unless you have needs for the additional functionality that prototype and scriptaculous provide this solution might be overkill.
Nice solution! I find a common issue with tool tip solutions is that the tips can get cut off if the elements on which they are placed are positioned near the edge of the browser window (e.g. try resizing the window and see what happens). A solution that seems to handle this kind of situation can be found at:
http://www.jnetiq.com/tool_tips.html
@anonymous – Thanks, nice script.
Here is another example of a tooltip.
This is just what I’ve been looking for save for one thing…
How would you make it sticky so that you could provide links in it?
I haven’t look at this code in a while. You might start by remove this line of code:
thealinks[x].onmouseout=function gomouseout(){hideddrivetip();};
and then adding a close button inside the tooptip that closes the tip. This would require adding the current onmouseout event functionality to the close button inside the tooltip.
Great script. It has come in VERY handy, thank you. I thought you might enjoy an alternate version. I modified it a bit and included a function borrowed from robertnyman to get all elements by class name. This way, the script can add tooltip to any element (including th, td, div, span, etc…) with the specified class name. It also supports multiple class names so you can have as many as you want. I suppose that you COULD apply multiple class names to one element and have one class name for adding tooltip, but whatever. =)
http://mindsetinternational.com/public/toolTip.js
Has anyone made a jQuery version of this simple tooltip script? I’ve seen the AJAX one, but looking for something this simple.
@Kenzie – You might try:
http://interface.eyecon.ro/demos/tooltip.html
My favorite one is missing: overLIB ( http://www.bosrup.com/web/overlib/ ). Animation (mouse following) seems smoother and the popups never jump around when approaching the end of the browser viewport.
Good information
Why do you include the following code:
if (!nondefaultpos) {pointerobj.style.visibility=“visible?;}
else{
pointerobj.style.visibility=“hidden?;}
why hide the pointer graphic if the tooltip flips to the left? Is there no way to dynamically reposition the pointerobj?
Can’t you simply add
“tipobj.style.left=curX+30-tipobj.offsetWidth+“px?;?
to the if (rightedge<tipobj.offsetWidth) evaluation, leave the visibility setting for the pointerobj, and change the left style definition for the location of the pointerobj?
as in: pointerobj.style.left=curX-7+“px?;
err… some odd things happened when trying to post changes to the script above. obviously, you wouldn’t add in ?? to the scripts…
the changes should be:
tipobj.style.left=curX+30-tipobj.offsetWidth+“px”;
and
pointerobj.style.left=curX-7+“px”;
Love how easy it was to customize this to match the look of my site, and think it’s a smart solution to use the object name property to customize the tooltip’s text. However being fairly new to javascript I’m having difficulty enclosing this script in a function so i can call it when I need to for ajax elements appearing after onload. http://www.mascguild.com/timeline/timeline.htm – script positioned as you have yours… works only on elements present onload.
http://www.mascguild.com/timeline/timeline2.htm -my attempts to enclose this script in a function and call it from ajax objects.
how come the script only works when placed at the bottom of the page?
Is there a way to implement is before the entire page loads?