2

我正在尝试创建自定义工具提示。我对 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;
}
4

4 回答 4

2

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

于 2013-08-21T06:49:28.453 回答
1

找到了解决方案！

删除标题属性 - @Robert

在 CSS 中：

content: "My content";
于 2013-08-21T07:00:14.527 回答
0

我想你可能不得不求助于javascript。

jQuery UI有一个工具提示插件，非常灵活和可定制。如果您是 Web 编程新手，您可能还需要学习一些 javascript 和jQuery 。但好消息是 jQuery 是为简单而设计的。

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

于 2013-08-21T06:50:33.060 回答
0

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

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

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

希望这可以帮助

于 2013-08-21T06:54:14.580 回答