tooltips for images?

Forum Moderators: open

Message Too Old, No Replies

tooltips for images?

guzzi

2:17 pm on Aug 20, 2004 (gmt 0)

how do i get a tooltip with my own text in it to appear over an image if someone leaves the mouse pointer over the image for a while?

Receptional Andy

2:20 pm on Aug 20, 2004 (gmt 0)

Hio Guzzi

This is known as 'alt text' which you include by using alt="your text here" in your image tag, e.g.

[w3.org...]

py9jmas

2:35 pm on Aug 20, 2004 (gmt 0)

You should be using the title attribute, not the alt attribute for tool tips on images. Rendering alt attributes as tool tips only encourages people to use inappropriate text. The alt attribute is to provide text that should be used as an alternative to the image, eg when the image is unavailable, on screen readers, etc.

proper_bo

3:39 pm on Aug 30, 2004 (gmt 0)

Also title tags do pop up in Mozilla Firefox where alt tags do not.

pageoneresults

4:09 pm on Aug 30, 2004 (gmt 0)

Keep in mind that when using the title attribute, it behaves just like the alt attribute does in IE. It will only display for a short period of time. If you have longer extended tooltips that you wish for the user to see, there are various javascript solutions out there that you can use. Just search for javascript tooltips and you'll find a few good resources.

Remember, if the user has javascript disabled, your javascript tooltips will not function. The title attribute is probably the safest and most efficient way of doing this but your tips need to be short and sweet. ;)

Cochrane

8:08 pm on Sep 2, 2004 (gmt 0)

Guzzi:
You might try this:
<HTML>
<Head>
<Script Language=JavaScript>

var absStr = "Position:Absolute;Top:0;Left:0";
var yOff = 70; // use this to position the message in the vertical axis
var xOff = 20; // use this to position the message in the horizontal axis

function stayHome(){

iL = document.body.scrollLeft;
iV = document.body.scrollTop;
mX = event.screenX-xOff+iL;
mY = event.screenY-yOff+iV;
isFloat.style.left = mX;
isFloat.style.top = mY;
}

document.onmousemove = stayHome;
window.onscroll = stayHome;

function insertFloatIMG(){

styleStr = "<Style>.msgFloat {"+absStr+";Border-Style:Solid;Border-Width:1px;Background-Color:Yellow;Padding-Right:5px;Padding-Left:5px;Padding-Top:3px;Padding-Bottom:3px;Font-family:Tahoma;Font-Size:13pt;Line-Height:95%;}</Style>";

divStr = "<DIV class=msgFloat id=isFloat> Null </DIV>"

document.write(styleStr);
document.write(divStr);
}

function hideMessage(){

isFloat.style.visibility = 'hidden';
}

function showMessage(toolTip){

isFloat.style.visibility = 'visible'
isFloat.innerHTML = toolTip;
}

function initToolTip(){

insertFloatIMG();
hideMessage();
}

</Script>
</Head>
<BODY>
<center>
<p><img src='1/niagara.jpg' onmouseover="showMessage('Here is a custom tool tip')"; onmouseout="hideMessage()"></p>
<br>
<br>
<p><img src='1/medical.jpg' onmouseover="showMessage('And here is another custom tool tip <br> consisting of two lines')"; onmouseout="hideMessage()"></p>
<br>
<br>
<p><img src='1/niagara.jpg' onmouseover="showMessage('Here is a third tool tip')"; onmouseout="hideMessage()"></p>
<br>
<br>
<p><img src='1/medical.jpg' onmouseover="showMessage('And this is a fourth custom tool tip <br> consisting of two lines')"; onmouseout="hideMessage()"></p>
</center>
<Script> initToolTip() </Script>
</Body>
</HTML>

StupidScript

8:18 pm on Sep 2, 2004 (gmt 0)

Welcome, Cochrane.

Neat solution, but for MSIE only (innerHTML, object.style).

Why didn't you make the stylesheet outside of the script? There's nothing in it that responds to the script, and the initial use of the variable could have just as easily been the variable value, itself.

For that matter, both the initToolTip() and the insertFloatIMG() functions seem unnecessary. You are creating a simple hidden DIV. Why use script to do that?

Just curious about your reasoning ...