How to prevent default title behavior with CSS or JavaScript

Question

Possible Duplicate:
Disabling browser tooltips on links and <abbr>s

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%;
  white-space: nowrap;
  z-index: 20px;
  -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);
}

I have the following code to change the default behavior of title tag. This works fine but the problem is that the it also shows the title with default style. here is my Fiddle link.

Is there any way to solve this problem using jQuery or CSS?

There's simply no way browsers allow you to http://stackoverflow.com/questions/1027762/how-to-disable-tooltip-in-the-browser-with-jquery http://stackoverflow.com/questions/6608001/remove-title-tag-tooltip http://stackoverflow.com/questions/457366/disabling-browser-tooltips-on-links-and-abbrs — Prinzhorn, Oct 01 '12 at 16:05

Fluidbyte · Answer 1 · 2012-10-01T21:08:56.337

The best thing I can think of is to unset the attribute with jQuery (or plain JS)

$('a').attr('title', '');

Then create a div like you did with the after but via JS. To my knowledge there isn't a way to disable the default behavior for title.

EDIT:

Just to make a point to whomever down-voted this - the question is answered correctly. If you decided to fault the answer because it uses JS read the post title. Making up your own attributes is foolish and (frankly) what's wrong with a certain percentage of 'web developers'. Hacking something because it doesn't work the way you think it should is short-sighted. Title tags are a WAI-ARIA and Section 503 issue so rendering them useless is stupid (and let's not forget any SEO credit you might have gained by sticking to standards).

Not even sure why you're getting downvoted... you're right. – Justice Erolin Oct 01 '12 at 16:20 — Justice Erolin, Oct 01 '12 at 16:20
Thanks @JusticeErolin. Not sure either. – Fluidbyte Oct 01 '12 at 17:12 — Fluidbyte, Oct 01 '12 at 17:12

score 0 · Accepted Answer · answered Oct 01 '12 at 16:22

^SOLVED

Rename the title tag

To use this

<a href="#" atitle="this is title"> hello </a>

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

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

a[atitle]:hover:after {
  content: attr(atitle);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20px;
  -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);
}

If you're going to write custom attributes it's probably a good idea to maintain some semblance of 'standards' and use the html5 `data` attribute. Also will make it easier to work with and JS frameworks that may be applied. — Fluidbyte, Oct 01 '12 at 17:14
Because you made up an attribute `atitle`. You should use a `data` attribute to maintain standards. — Fluidbyte, Oct 02 '12 at 14:54

How to prevent default title behavior with CSS or JavaScript

2 Answers2