Display text when mouse over an object

[dmkAlex]

I have a column containing the title of my merchandises. The title
doesn't describe the merchandise fully, but I don't want to display
all the detail description.

I want a small bulletin open up when the mouse is over the title. This
way, the user can move the mouse over the title and read a brief
description of the item.

How is that done?

Thanks.

DMK

 

[Tom Cole]

I have a column containing the title of my merchandises. The title
doesn't describe the merchandise fully, but I don't want to display
all the detail description.

I want a small bulletin open up when the mouse is over the title. This
way, the user can move the mouse over the title and read a brief
description of the item.

How is that done?

Thanks.

DMK

You could setup a hidden div and position / display onmouseover or use
an existing javascript library (i.e. walterzorn.com has a very handy
tooltip script that's simple to use) however a simpler solution may be
just to set the title attribute of the containing element (you
mentioned column so I'm guess the title is inside a td element, so you
can set it's title attribute). This will cause a tooltip to appear
with the title text in it.

 

[Thomas 'PointedEars' Lahn]

Use the Source, Luke.

[...]

You could setup a hidden div and position / display onmouseover

Of the mentioned alternatives that would be best, although plain CSS also
can take care of that. IIRC I have posted an example before.

or use an existing javascript library (i.e. walterzorn.com has a very handy
tooltip script that's simple to use)

I have reviewed Walter Zorn's Tooltip Library recently. The least I can say
about it is that it uses deprecated, because unreliable and unnecessary,
coding practices, and false assumptions, such as eval() calls and browser
sniffing for property inference.

Here is a good example of what I mean, from tt_Browser() in wz_tooltip.js,
called from tt_Init() in the same file which is *required* for the operation
of this script:

[pretty-printed]
| tt_op = (document.defaultView && typeof(eval("w" + "indow" + "." + "o"
| + "p" + "er" + "a")) != tt_u);
| tt_ie = n.indexOf("msie") != -1 && document.all && !tt_op;
| if(tt_ie)
| {
| var ieOld = (!document.compatMode
| || document.compatMode == "BackCompat");
| tt_db = !ieOld ? document.documentElement : (document.body || null);
| if(tt_db)
| tt_ie56 = parseFloat(nv.substring(nv.indexOf("MSIE") + 5)) >= 5.5
| && typeof document.body.style.maxHeight == tt_u;
| }
| else
| {
| tt_db = document.documentElement || document.body
| || (document.getElementsByTagName
| ? document.getElementsByTagName("body")[0]
| : null);
| if (!tt_op)
| {
| n6 = document.defaultView
| && typeof document.defaultView.getComputedStyle != tt_u;
| w3c = !n6 && document.getElementById;
| }
| }

Avoid it at all costs in its current form.

however a simpler solution may be just to set the title attribute of the
containing element (you mentioned column so I'm guess the title is inside
a td element, so you can set it's title attribute). This will cause a
tooltip to appear with the title text in it.

In several cases (particularly graphical Web browsers for PC or Mac) a
`title' attribute may lead to the display of a tooltip; however, there is no
requirement per the specification. And in many cases the tooltip text will
be trimmed to an unspecified number of characters. Bad advice as well.


PointedEars