Menu
I want to style the text we see when we hover over the image. I tried the following but it won’t work:
<body>
<img src="img.jpg" title = "<span class='title'> title </span>
</body>
My style is in head. I wonder why it’s being shown as plain text and why style isn’t working.
986
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.
The style attribute specifies the style, i.e. look and feel, of the <img> element. A style contains any number of CSS property/value pairs, separated by semicolons (;). The style attribute overrides any other style that was defined in a <style> tag or an external CSS file.
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.
Nothing is impossible. edited the solution by Andres Ilich to the question: How to change the style of Title attribute inside the anchor tag?
a {
color: #900;
text-decoration: none;
}
a:hover {
color: red;
position: relative;
}
a[data]:hover:after {
content: attr(data);
padding: 4px 8px;
color: rgba(0,0,0,0.5);
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 2;
border-radius: 5px ;
background: rgba(0,0,0,0.5);
}<a data="This is the CSS tooltip showing up when you mouse over the link"href="#" class="tip">Link</a>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