Fading JavaScript Tooltips 2kb

pls, disregard my prev post,
ref: square corners (under IE6/XP-SP2).

Seems to have been corrected!
Michael, you are just too fast!
Thanks!!!
Ray SF

Hi,

Just came across this and at first glance it looks visually very nice but then I took a look at the markup for it and must say that it isn’t the best I have ever come across I’m afraid.

If I turn off JS then I don’t get any text on hovering over the links at all. You could have used a normal link and then used the title attribute and done the rest with JS so that if JS is turned off then you would still get some kind of feedback. Also the fact that they looked like links is very very confusing as you would expect them to go somewhere but as spans they are not going to do that.

So visually nice but let down by the way it was done I’m afraid.

Best wishes,

Mark

Hi Michael,

Sorry but I don’t quite get what you mean by not able to use HTML?

Best wishes,

Mark

Hi Michael

Thanks a lot or sharing this cool piece of code!
I’ve added some changes to allow two more parameters for show() to define the positioning: show(v,w,[t|m|b],[l|c|r]). The third parameter being top, middle or bottom, and the forth for left, center or right.

10c10
< var tt,t,c,b,h;
—
> var tt,t,c,b,ov,oh,pv,ph;
13c13,15
< show:function(v,w){
—
> show:function(v,w,_pv,_ph){
> pv = _pv ? _pv : ‘t’;
> ph = _ph ? _ph : ‘r’;
42c44,45
< h = parseInt(tt.offsetHeight) + top;
—
> ov = (pv == ‘t’ ? parseInt(-1*parseInt(tt.offsetHeight) – top) : (pv == ‘m’ ? parseInt(-1*tt.offsetHeight/2) : parseInt(top)));
> oh = (ph == ‘r’ ? parseInt(left) : (ph == ‘c’ ? parseInt(-1*tt.offsetWidth/2) : parseInt(-1*tt.offsetWidth – left)));
49,50c52,53
< tt.style.top = (u – h) + ‘px’;
< tt.style.left = (l + left) + ‘px’;
—
> tt.style.top = (u + ov) + ‘px’;
> tt.style.left = (l + oh) + ‘px’;

I’m not too much of a javascript coder so these changes come without any warranty…

@renzo

If you use the approach I proposed above and changed the ‘width’ attribute to a ‘style’ attribute you could do the same thing

You can also create Rails helper to save your typing a bit (add this to app/helpers/application_helper.rb):

def tooltip(label, text, html_options={})
options = {:class => ‘hotspot’, nmouseover => “tooltip.show(‘#{text}’)”, nmouseout => “tooltip.hide();”}.merge(html_options)
content_tag(:span, options) do
label
end
end

Then in your views, simply use:

<%= tooltip(“Your label”, “The tooltip text”) %>

Hope that helps someone

Nice website with good scripts , ty ty !!

Hi, great script. It works fine for me in all browser except IE (i’m using v7). I get page error tt.timer is null or not an object.
Any ideas?

? from a noob…How do I use an apostrophe or quotes within the description I’m trying to put in the tooltip box? I can’t seem to figure it out.

Can anyone tell me how to make this with an external js ?
thanks for your great js.

As usual…great coding, Michael. I’m wondering though – and didn’t read anyone else posting the same question – why didn’t you add the ability to make the tooltips sticky in order to add HTML content (e.g. images, URL;s, etc.)?

Yes…the sticky quality. Currently, your tooltips shadows/follows the mouse wherever it goes. The functionality that I think this (excellent) tooltip is missing is the ability to have the tooltip stay in a set x,y position (relative to when the mouse first hovered over the assigned item). This would allow the insertion of (say) URL’s depicting “More Details…” or links to content relevant to the item the to which the tooltip is attached.

This looks really smart and elegant. I’m still learning js, and this is a great example for me, as is the other stuff you’ve posted! Thanks

Really nice, thank you!

I like this fading effect, but how can I make this tool tip to stay there for some time or text can be selected and can be copied. I am eager to know how this can be done.

Maybe I found: simply, copying the code the apostrophe becomes high comma in ‘px’ and ‘number’.
After the substitution, everything works!

if i want to use this plug in and code as a server control

so that we can wrap[ this functioonality.

can any one will tell me the way to wrap this as asp.net server control

Great scripts.. thanks

I was playing around with this script and noticed that it had a tendency to be interrupted by other JS files also utilizing onmouseover. My solution was thus to modify the fade function as follows:

if(d == -1){
tt.style.display = ‘none’;
document.onmousemove = null;
tt = null;
}

This also had the benefit of not having the hidden div follow your cursor position on mouse out. I only tested in FF 3.0 so let me know how this fares in other browsers.

Great script.

Did anybody get the answer for the post for page error tt.timer is null or not an object.

I am getting that error on IE 7.

Great script But I have troubles with selectboxes in IE6 (iframe selectbox hack). Does anyone have a solution to this problem?

Thank you very much for sharing this java script code. very easy to use code very helpful for animation and fonts.

@lex: use < span class=”differentcolor”>Text< /span > to format your text any way you wish.

Thank you for making this available. I am just starting to learn javascript and found this via google. Can you answer one question for me please!
How do I make the tooltips float above MediaPlayer? I have spent days searching/trying to make this work and No Joy. I have set style.zIndex and z-index and nothing works.

I will appreciate any help you can give.

Thank you

–
Dan benDan

Sorry I missed to see your response that there is No License and free to use

For Internet Explorer 6.0, after mouseovering of the link, something causes process in every mouse movement. It seems timer problem and cursor changes like page is refreshing.

Wow, the curious gb. Thnx…

I have a bunch of these on the site im working on. Love the script and styled with css. Here is the url (hover over left nav): http:///www.centraltimeclock.com/ctcbeta/timeandattendance My only issue is that when testing for SEO, the most common 2 & 3 word phrases happen to be "tooltip onmouseout" I need to fix this somehow please!! Is there a way to NOT code the html the long way?

Hello and thanks
I added support for automate this on span-elements with a specific class name during the page onload:

//Page
<span class="ToolTip">Info text goes here…</span>
<span class="ToolTip">Another info text goes here…</span>

//CSS
.ToolTip {cursor:help; width:16px; height:16px;display:block;background:url(images/help.png);font-size:0%;line-height:1px;overflow:hidden;}

//JS
window.onload = function () {
var myArray = getElementsByClassName(document, "span", "ToolTip");
for ( var i=0, len=myArray.length; i<len; ++i ){
myArray[i].onmouseover = function () {
tooltip.show(this.innerHTML);
};
myArray[i].onmouseout = function () {
tooltip.hide();
};
}
};

function getElementsByClassName(oElm, strTagName, strClassName){
var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
var arrReturnElements = new Array();
strClassName = strClassName.replace(/\-/g, "\\-");
var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
var oElement;
for(var i=0; i<arrElements.length; i++){
oElement = arrElements[i];
if(oRegExp.test(oElement.className)){
arrReturnElements.push(oElement);
}
}
return (arrReturnElements)
};