12

Is it possible to style the tooltip for the alt attribute?

I wish to style the background, font color etc for the html alt attribute.

Can anyone help me with this please?

Myles Gray
  • 8,711
  • 7
  • 48
  • 70
priya
  • 529
  • 2
  • 6
  • 11
  • 7
    Indeed, that would be the title attribute. – mensch Feb 18 '11 at 13:15
  • This question is answered here: http://stackoverflow.com/questions/2011142/how-to-change-the-style-of-title-attribute-inside-the-anchor-tag – isomorphismes Sep 24 '13 at 05:21
  • What appears as a tooltip in desktop browsers is due to the `title` attribute (and they're better used on links and form elements). What appears when images aren't loaded (user preference or flakky network) or read to screen readers is the `alt` attribute on `img`, `area` and `input[type="image"]`. Confusion arose from IE6/IE7 which were doing exactly the opposite (tooltip on images with value of `alt` attribute...) and WebKit still don't display visually the `alt` attribute if image isn't loaded. Meh – FelipeAls Jun 07 '14 at 09:12

3 Answers3

5

You cannot design the default tooltip (i.e. styling the alt attribute) but you can use Javascript, CSS and a <div> or <span> tag to create something similar:

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

Or these CSS ONLY tooltips:

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

Myles Gray
  • 8,711
  • 7
  • 48
  • 70
3

Semantic Tooltips With Pure CSS3 and HTML5

This technique is so simple that I’m really surprised nobody has come up with it before, please shoot me link if they have but I couldn’t find anything after some extensive Google action.

Currently, most people use something like this to produce a pure CSS tooltip:

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

(Code from CSSGlobe)

But this is another extraneous element in our HTML and won’t really make much sense to screenreaders so let’s try to produce a more semantic solution.

See it in action

The solution lies in the title attribute and CSS’s content property. We can use the attribute to dynamically insert the text with CSS. The HTML is as basic as you like:

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

Using CSS’s content property, we then produce some content after the span like so:

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

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

Our tooltip will now show up when we hover over the span. We should probably make it a bit 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; }

Looking to the Future

With HTML5 finally allowing custom 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 read more about HTML5 custom attributes at JavaScript Kit.

You will then need to change the CSS to:

.tooltip:hover:after { content: attr(data-tooltip); }
Muhammad Tahir
  • 2,351
  • 29
  • 25
  • It is nice that stylized tooltips get created but the default html title tooltips still show, so you end up getting double tooltips. This is not a solution unless you can stop the default tooltips from popping up. – Joshua Robison Feb 14 '23 at 01:00
0

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

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

madmik3
  • 6,975
  • 3
  • 38
  • 60