使用 jQuery 与 CSS3 并行设置属性标题：after答案

【问题标题】：Using jQuery to set Title on attribute in parallel with CSS3 :after使用 jQuery 与 CSS3 并行设置属性标题：after
【发布时间】：2011-07-12 09:57:17
【问题描述】：

您好，我正在使用它为元素设置标题属性：

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

然后我使用 CSS3 来执行此操作：

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

我的问题是，当我将鼠标悬停在元素上时，漂亮的 CSS 标题会按照我的意愿出现，我可以沿着 TD 移动，并且“升级到”会出现在每个元素上方。

问题是，当我将鼠标悬停在第一个上时，我得到了 CSS 标题，但当我移动到其他 TD 时，默认的灰色浏览器标题也会出现并保持可见。如何隐藏弹出的默认标题但仍保持 CSS:after 标题在悬停时可见？

【问题讨论】：

你在什么浏览器中测试它？在 Firefox 中我觉得没问题jsfiddle.net/MKTbn
铬。没有在其他地方测试过！

标签： css css-selectors pseudo-element

【解决方案1】：

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

替代方法是使用html5's data attributes，这会使您的代码看起来像...

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

还有你的 css 声明...

content: attr(data-tooltip);

【讨论】：

请注意，data-* 属性在 HTML5 之前的规范中无效。但是，如果用例假设 HTML5，那么确实可以使用 data-* 属性而不是标题。
它会工作，只是不会验证。我认为如果 OP 使用如此高级的 CSS，那么他可能使用的是 html5 文档类型。

【解决方案2】：

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

如果您不设置title 属性，而只是在document.ready() 上插入工具提示，该怎么办？这将为您提供 more predictable code。只需按照您需要的方式放置工具提示，我认为它应该可以解决您的问题。

jsFiddle snippet

【讨论】：