Question

我正在尝试创建自定义工具提示。我对HTML和CSS比较陌生。问题是我遵循了关于工具提示的教程，但我在悬停时得到了工具提示的双重显示。我看到我的自定义工具提示和库存一起。我希望只看到自定义的那个。

HTML：

<button class="tooltip" title="Site1 tooltip." id=main1 type="button" onclick="loadData(1)">
    <img src="Images/Icon.png" width="68" height="68"/>
</button>

CSS：

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


.tooltip:hover:before{
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: attr(title);
    left: 50%;
    position: absolute;
    z-index: 99;
}

Answer 1

删除title属性，这是标准工具提示的负责。

Answer 2

找到解决方案！

删除title属性 - @Robert

在css中：

content: "My content";

Answer 3

我想你可能会使用javascript。

jQuery UI有一个tooltip插件，非常灵活且可自定义。您可能还需要学习一些javascript，如果您是网络编程新手，还需要jQuery。但好消息是jQuery是为简单而设计的。

问题的根源是title属性，导致双标题显示。

Answer 4

http://ransandeep.blogspot.in/2010/04/light-weight-popup-using-css-and.html

它有完整的描述来创建工具提示窗口/弹出窗口。

博客包含弹出窗口的详细信息，因此事件是Click事件。您可以将事件更改为onhover或onmousemove / mouseout来代替
onclick="HideDiv('DivPopUp');"
onclick="ShowDiv('DivPopUp')"

希望这有帮助

双工具提示弹出窗口

4 个答案: