Changing the tooltip color for a hyperlink using html and css

问题

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.

回答1:

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;
}

回答2:

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

回答3:

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.

回答4:

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.

回答5:

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.

回答6:

That's controlled by the operating system.

来源：https://stackoverflow.com/questions/8969927/changing-the-tooltip-color-for-a-hyperlink-using-html-and-css

标签

html

css

tooltip