Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I display simple tooltips on icons in html?

I am using ActiveScaffold in a Ruby on Rails app, and to save space in the table I have replaced the default "actions" text in the table (ie. "edit", "delete", "show") with icons using CSS. I have also added a couple of custom actions with action_link.add ("move" and "copy").

For clarity, I would like to have a tooltip pop up with the related action (ie. "edit", "copy") when I hover the mouse over the icon.

I thought I could do this by adding a simple "alt" definition to the tag, but that doesn't appear to work.

Can somebody point me in the right direction?

like image 520
Brent Avatar asked Nov 27 '22 10:11

Brent


1 Answers

The alt attribute is to be used as an alternative to the image, in the case of the image missing, or in a text only browser.

IE got it wrong, when they made alt appear as a tooltip. It was never meant to be that.

The correct attribute for this is title, which of course doesn't do a tooltip in IE.

So, to do have a tooltip show up in both IE, and FireFox/Safari/Chrome/Opera, use both an alt attribute and a title attribute.

like image 159
FlySwat Avatar answered Dec 16 '22 12:12

FlySwat