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?

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?

• javascript
• html
• css

4 Answers 4

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).

Create your own! You can simply create a hidden div in your HTML, then when someone hovers over the image, show your div instead.

If you would like to create a custom tooltip, I would remend this. It shows you, in detail, how to create your own tooltips in js, which are CSS driven and can be easily reused.

Additionally, if you are using a framework, things get even easier. For example there are numerous jQuery tooltip plugins. These allow you to make your tooltips appear on the mouseover of any element.

I'll remend Tooltipster. Really easy to use, can be used on any element that supports the title attribute and has many cool features and looks.