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?
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.
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.
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.
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).
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With