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

样本输出：

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

jsfiddle(sample view)

最佳答案

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

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

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

Example