How to style alt tooltip in html?

Question

Can I style the tooltip for the alt attribute?

I want a background style, font color, etc. for the html alt attribute.

Can anyone help me with this?

Answer 1

You can use the new data- HTML5 custom attribute: Semantic hints with pure CSS3 and HTML5.

Answer 2

You cannot create a default tooltip (i.e., the alt attribute style), but you can use Javascript, CSS, and <div> or <span> tags to create something like this:

http://shurie.com/coder/code_details.asp?codeid=4

Or these CSS only hints:

http://sixrevisions.com/css/css-only-tooltips/

Answer 3

You can do this using CSS and positioning by showing and hiding a div in javascript.

it shows you one way. http://sixrevisions.com/tutorials/javascript_tutorial/create_lightweight_javascript_tooltip/

Answer 4

Semantic hints with pure CSS3 and HTML5

This method is so simple that Im really surprised that no one came up with it before, please shoot me if I have a link, but I could not find anything after some extensive google action.

Currently, most people use something like this to create a clean CSS hint:

 <a href="#">Title <span>Tooltip</span></a> 

(Code from CSSGlobe)

But this is another extraneous element in our HTML and, in fact, does not make much sense for firmware, so let's try to create a more semantic solution.

Look in action

The solution is the title attribute and the CSS content property. We can use this attribute to insert text dynamically using CSS. HTML is basic as you like:

 <p>I <span title="I mean really, really" class="tooltip">really</span> like pie.</p> 

Using the CSS content property, we then create some content after the span as follows:

 .tooltip:hover:after { content: attr(title); } 

HTML Dog has a list of what we can use with the content property.

Now our tooltip will be displayed when we hover over the range. We should probably make it more visible.

 .tooltip { border-bottom: 1px dotted #333; position: relative; cursor: pointer; } .tooltip:hover:after { content: attr(title); position: absolute; white-space: nowrap; background: rgba(0, 0, 0, 0.85); padding: 3px 7px; color: #FFF; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; margin-left: 7px; margin-top: -3px; } 

A look into the future

With HTML5 finally letting you customize attributes, we can make this even more semantic.

 <p>I <span data-tooltip="I mean really, really." class="tooltip">really</span> like pie.</p> 

You can learn more about custom HTML5 attributes in the JavaScript Kit.

Then you will need to change the CSS:

 .tooltip:hover:after { content: attr(data-tooltip); }