Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Customize the <img title> tooltip

I was wondering is it possible to customize the tooltip that we get after setting the title attribute in an img tag? Now I get a standard rectangle with blue background with text on it and what I'd want to get is my own image (lets say something that looks like a cloud) with text on it. Is it possible with css or js?

like image 967
Mateusz Dymczyk Avatar asked Sep 09 '10 13:09

Mateusz Dymczyk


People also ask

How do you style a tooltip title?

The tooltip is automatically generated by web browsers, it actually can not be removed or changed. To change the tooltip style, we need to add a tooltip text to a different attribute, for example data-title , then use CSS code to create and customise the style. In WordPress, you can add the CSS code to your theme CSS.

Can IMG tag have title?

The title attribute on an <img> tag adds a tooltip with title text to the image. Hovering the mouse over the image will display the tooltip.

How do I customize the title attribute in HTML?

You can't style an actual title attribute How the text in the title attribute is displayed is defined by the browser and varies from browser to browser. It's not possible for a webpage to apply any style to the tooltip that the browser displays based on the title attribute.


1 Answers

You need javascript for that. try this here or here Or you can roll your own. But basically there is no way to do it directly in html (dont know about htm5/css3).

like image 159
Iznogood Avatar answered Sep 19 '22 02:09

Iznogood