在href中不删除窗口工具提示

Question

我已经创建了这个工具提示琴杆

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


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

        .tooltip:hover:after{
            background: #333;
            background: rgba(0,0,0,.8);
            border-radius: 5px;
            bottom: 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: 6px 6px 0 6px;
            bottom: 20px;
            content: "";
            left: 50%;
            position: absolute;
            z-index: 99;
        }

但是，除了工具提示之外，它还会显示第二个带有相同文本的灰色窗口。我怎样才能摆脱第二扇窗户？

谢谢

Answer 1

不要使用标题，因为在默认情况下，标题显示黄色的工具提示。使用html5数据攻击器代替。

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



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

Answer 2

第二个框是浏览器呈现的链接标题。这就是为什么许多工具提示解决方案使用新的“数据”属性来存储工具提示的文本，并且标题保留为空白。不建议这样做，因为title属性用于可访问性。

您还可以使用javascript删除title属性。使用javascript来捕获标题，删除它，然后将其提供给您的工具提示函数。这样就行了。