How to prevent default header behavior using CSS or JavaScript

Question

Possible duplicate:
Disabling browser hints for 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 the title tag. This works great, but the problem is that it also displays the title with the default style. here is my fiddle link .

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

Answer 1

^ solvable

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

Answer 2

The best I can think of is to undo an attribute using jQuery (or plain JS)

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

Then create a div, as you did with after , but through JS. As far as I know, there is no way to disable the default behavior for title .

EDIT:

Just to indicate whoever voted for it, the question was answered correctly. If you decide to cancel the response because it uses JS, read the post header. Composing your own attributes is stupid and (to be honest) what's wrong with a certain percentage of "web developers." Hacking something because it doesn't work the way you think it should be shortsighted. Heading titles are the problem of WAI-ARIA and Section 503, so making them useless is stupid (and don't forget about any SEO credit you might get by adhering to standards).