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

时间:2016-02-03 07:56:18

标签: javascript jquery html css

自定义工具提示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;
}

示例输出:

enter image description here

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

jsfiddle(sample view

4 个答案:

答案 0 :(得分:7)

您只使用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

答案 1 :(得分: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

答案 2 :(得分:1)

使用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);

答案 3 :(得分:0)

如果您想保留标题(不会永久切换到数据标题),您可以使用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>