0

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 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?

4

2 回答 2

2

不幸的是，没有简单的 CSS 方法可以使用 CSS 禁用工具提示。我建议在您的示例中使用 title 属性无论如何都不是真正的语义（标题属性旨在解释链接背后的内容）。

另一种方法是使用html5 的数据属性，这将使您的代码看起来像......

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

和你的CSS声明......

content: attr(data-tooltip);
于 2011-07-12T15:52:31.067 回答
1

问题是没有办法阻止浏览器显示带有该title属性的工具提示。所以，我想说，你没有机会用你目前的方法解决这个问题。

如果您不设置title属性，而是简单地在 上插入工具提示，该document.ready()怎么办？这会给你更多可预测的代码。只需按照您需要的方式放置工具提示，我认为它应该可以解决您的问题。

jsFiddle 片段

于 2011-07-12T21:32:45.053 回答