自定义工具提示的css后，它会显示两次

Question

自定义工具提示msg的CSS后，它在屏幕上显示两次。以下是提供的实现方式。

<a href="#" title="This is some information for our tooltip." class="tooltip">
    <span title="More">CSS3 Tooltip</span>
</a>

.tooltip {
    display: inline;
    position: relative;
}

.tooltip:hover:after {
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    top: 26px;
    color: #fff;
    content: attr(title);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 220px;
}

.tooltip:hover:before {
    border: solid;
    border-color: #333 transparent;
    border-width: 0 6px 6px 6px;
    top: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}

示例输出：

帮助我找到原因，以及如何抑制第二个工具提示msg

jsfiddle（sample view）

Answer 1

您只使用CSS“扩展”标题的功能，但原始的标题属性仍在渲染中。

您可能希望将其更改为默认情况下未由浏览器呈现的<div id="div1" class="test" style="background-color:red">111</div> <div id="div2" class="test" style="background-color:blue">22</div> <div id="div3" class="test" style="background-color:green">333</div> <div id="div4" class="test" style="background-color:black">444</div> <div id="div5" style="background-color:black">44455555555</div> ，并将CSS更改为data-title以使用它。

此外，删除内部跨度的标题，它是多余的和不必要的。

Example

Answer 2

这是解决方案，所以我在这里分享，它可能会帮助其他人： 我应用了大多数答案所建议的相同方法，即

  

您可能想将其更改为数据标题，而不是由数据标题呈现   浏览器默认情况下，并将CSS更改为content：attr（data-title）to   请改用它。

使用上面的插件我做了以下更改。

页面加载后动态执行

• 通过复制data-title属性的内容

添加title属性

• 然后删除title属性

以下是示例代码

$(document).ready(function(){
  $(".tooltip").hover(function(){
    $(this).attr("data-title", $(this).attr("title"));
    $(this).removeAttr("title");
  }, function(){
    $(this).attr("title", $(this).attr("data-title"));
    $(this).removeAttr("data-title");
  });
});

JsFiddle link

Answer 3

使用content: attr(data-title)属性代替data-title。

title

并在css中提取此属性的内容。

<a href="#" data-title="This is some information for our tooltip." class="tooltip"><span title="More">CSS3 Tooltip</span></a>

编辑：

如果您无法控制title属性，则可以在运行时使用JavaScript删除它们。

content: attr(data-title);

Answer 4

如果您想保留标题（不会永久切换到数据标题），您可以使用javascript删除并重置悬停时的属性。 请参阅：jquery: hide title attribute but not remove it

或者更容易使用：aria-label

<a href="#" aria-label="This is some information for our tooltip." class="tooltip">
   <span>CSS3 Tooltip</span>
</a>