Changing the tooltip color for a hyperlink using h

Question

I need to change the background color of the tool tip which will show on mouse over on a hyperlink (for using in firefox and ie6 & higher). Is there any css and html based scripts (without jQuery or javascript) for doing this.

I came to know that the background color is actually as per the OS properties.

Answer 1

You can use HTML and CSS to create a tooltip of your own style. For this, you would not use a title attribute but some content element, which is initially hidden with CSS and becomes visible via a CSS rule with :hover. There is a large number of pages that explain and illustrate the techniques; Google for css tooltip for example.

Answer 2

I do it like this:

This is text before the 
<a href="#" class="TT-container">
  tool tip link<span class="TT-value">tool tip text</span></a> 
and this is after it.

.TT-container {
  position: relative;
  border-bottom : 1px dashed #999999;
}
.TT-value {
  display: none;
  background-color: #f8e7c7;
  color: black;
  border: 1px solid black;
  padding: 3px 5px 3px 5px;
  white-space: pre;
  text-decoration: none;
  z-index: 99;
}
.TT-container:hover {
  font-size: 100%;                          /* fix an IE bug */
  z-index: 2;
}
.TT-container:hover .TT-value {
  position: absolute;
  top: 5px;
  left: 20px;
  display: inline;
}

Answer 3

No. THe background color is controlled by the browser/OS. You'd need to create a custom tooltip if you want to customize it. And that means javascript in general.

Answer 4

You can't change the colour of a standard tooltip which is declared like:

<a title="tooltip"></a>

This is a standard tooltip which has its design chosen by the specific browser and Operating System.

Without using javascript, you could have a hidden div which only appears on hover, however I think this would be messy for anchor links.

I know you have specifically requested no javascript/jquery, but I believe this would be a good solution if you change your mind:

http://flowplayer.org/tools/tooltip/index.html

Answer 5

Here's a technique, by ditching the traditional tooltip altogether and creating your own custom element that displays on :hover: http://sixrevisions.com/css/css-only-tooltips/

Having wandered around Google for a while I'm pretty sure it's not possible to styling the default title tooltip in any browser, so without JavaScript the above technique is your only option.

Answer 6

That's controlled by the operating system.