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

前端之家收集整理的这篇文章主要介绍了javascript – 自定义工具提示的css后,它显示两次前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

.tooltip:hover:after {
    background: #333;
    background: rgba(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

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

jsfiddle(sample view)@H_502_11@

最佳答案@H_502_11@
你只使用CSS“扩展”标题功能,但原始的标题属性仍在渲染.

您可能希望将其更改为默认情况下未由浏览器呈现的数据标题,并将CSS更改为content:attr(data-title)以使用它.

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

Example@H_502_11@

猜你在找的HTML相关文章