Tooltip styling with css not working, still seeing default tool tip?

Question

I'm attempting to style a tooltip on hover but with no success.

Here is my code:

CSS

   .header_menu_res ul li a:hover:after {
content: attr(title);
color: #fff;
background: #333;
background: rgba(51,51,51,0.75);
padding: 5px;
position: absolute;
left: -9999px;
opacity: 0;
bottom: 100%;
white-space: nowrap;
-webkit-transition: 0.25s linear opacity;
height: 100px !important;
}

HTML

<div class="header_menu_res"><ul><li><a class="primary" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium" href="http://www.test.co.uk/"><em class="icon-home"></em>Home</a></li></ul></div>

When i hover over the anchor i still see the default tool tip? Any help greatly appreciated.

score 2 · Accepted Answer · edited May 23 '17 at 10:24

Use the below code

Fiddle: http://jsfiddle.net/tDQWN/

a {
  color: #900;
  text-decoration: none;
}

a:hover {
  color: red;
  position: relative;
}

a[title]:hover:after {
  content: attr(title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 20;
  white-space: nowrap;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

Source: How to change the style of Title attribute inside the anchor tag?

tried this i still see the default light yellow ox with black border and text? I copied exactly. Any idea? — user892134, Nov 11 '14 at 11:10

score 0 · Answer 2 · answered Nov 11 '14 at 11:51

The default tooltip behavior, in browsers that have it, is completely outside the scope and control of CSS. This is one of the main reasons of using “CSS tooltips” instead. But it also means that there is no way, in CSS or otherwise, to prevent the default tooltip from appearing, except by omitting the title attribute.

The usual scenario is that when using CSS tooltips, you do not use the title attribute but place the desired tooltip text elsewhere, e.g. in a data-title attribute (which has absolutely no effect except as defined with your CSS and/or JavaScript code) or in a normal element near the element it relates to, normally hidden with CSS except on mouseover.

So the simplest fix is to change the attribute name title to data-title, in HTML and in CSS.

Tooltip styling with css not working, still seeing default tool tip?

2 Answers2