Using jQuery to set Title on attribute in parallel with CSS3 :after

Hi i'm using this to set a title attribute on elements:

$('.upgradeTables thead tr td:gt(1)').attr('title', 'Upgrade To');

I'm then using CSS3 to do this:

.upgradeTables thead tr td:hover:before
{
    background: #000;
    content: attr(title);
    color: #f7f7f7;
    opacity: 0.95;
    display: block;
    font-weight: bold;
    position: relative;
    text-align: center;
    top: 0px;
    padding: 5px;
    -webkit-box-shadow: 1px 1px 10px 0.5px #333 !important;
    -moz-box-shadow: 1px 1px 10px 0.5px #333 !important;
    box-shadow: 1px 1px 10px 0.5px #333 !important;
}

My question is, when i hover over the elements, the nicely CSS'd titles appear as i would like them and i can move along the TD's and "Upgrade To" appears above every one.

The开发者_StackOverflow社区 problem is, when i hover over the first one, i get the CSS title but also the default grey browser title appear and stays visible as i move along to other TD's. How can i hide the default title popping up but still keep the CSS:after title visible on hover?

Unfortunately there is no simple CSS way of disabling tooltips with CSS. I'd suggest that using the title attribute in your example is not really semantic anyways (title attributes are meant to explain what's behind a link).

The alternative would be using html5's data attributes, which would make your code look like...

$('.upgradeTables thead tr td:gt(1)').attr('data-tooltip', 'Upgrade To');

and your css declaration...

content: attr(data-tooltip);

The problem is that there is no way to prevent browsers from showing the tooltip with the title attribute. So, I would say, there is no chance for you to solve this with the approach you have currently.

What if, instead of setting the title attribute, you would simply insert the tooltips on document.ready()? This would give you more predictable code. Just position the tooltip the way you need it and, I think, it should solve your issue.

jsFiddle snippet