双工具提示弹出窗口

时间:2013-08-21 06:40:26

标签: html css

我正在尝试创建自定义工具提示。我对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 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:1)

找到解决方案!

删除title属性 - @Robert

在css中:

content: "My content";

答案 2 :(得分:0)

我想你可能会使用javascript。

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

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

答案 3 :(得分:0)

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

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

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

希望这有帮助