Question

我已创建此工具提示 fiddle link

<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数据attaribute。

<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

第二个框是浏览器呈现的链接标题。这就是为什么许多工具提示解决方案使用新的＆＃34;数据＆＃34;用于存储工具提示的文本的属性，标题留空。不是真的推荐，因为title属性用于辅助功能。

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

在href中不显示窗口工具提示

2 个答案: