CSS - 仅使用css和html的工具提示不起作用

Question

我尝试仅使用 css3 和html执行简单工具提示，但转换不起作用。我做错了什么？

HTML

<p>
    This has tooltip
</p>
<div class="tooltip">Tooltip content</div>

CSS

p {
    width: 200px;
    background-color: aqua;
    padding: 10px;
    margin-top: 50px;
}

div.tooltip {
    position: absolute;
    width: auto;
    padding: 10px;
    background-color: rgba(0,0,0, 0.5);
    top: 0px;
    display: none;
    opacity: 0.0;
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -o-transition: opacity 1s;
    -moz-transition: opacity 1s;
}

p:hover + div.tooltip {
    display: block;
    opacity: 1.0;
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -o-transition: opacity 1s;
    -moz-transition: opacity 1s;
}

http://jsfiddle.net/MCDg4/

Answer 1

更新/替代解决方案

对于现代浏览器CSS3解决方案，您可以使用伪元素..

<span data-tooltip="I am the tooltip">This has a tooltip</span>

和

[data-tooltip]{
    position:relative;
}
[data-tooltip]:before{
    content:attr(data-tooltip);
    position:absolute;
    bottom:110%;
    padding:10px;
    background:#666;
    opacity:0;
    color:white;
    font-size:smaller;
    -webkit-transition:opacity 1s ease;
    -o-transition:opacity 1s ease;
    transition:opacity 1s ease;
    pointer-events:none;
}
[data-tooltip]:hover:before{
    opacity:1;
}

演示 http://jsfiddle.net/BJ2tr/

（这可以在没有伪元素的情况下通过将工具提示嵌套在它引用的元素内，并相应地调整css来实现）

---

不幸的是，当您将display从none更改为其他内容时，您无法进行转换。

而不是display:none你可以在窗口之外（ top:-9999px ）将其偏移，并在显示时将其置于正确的位置。

div.tooltip {
    position: absolute;
    width: auto;
    padding: 10px;
    background-color: rgba(0,0,0, 0.5);
    top: -999px; /*CHANGED THIS AND REMOVED display:none*/
    display: none;
    opacity: 0.0;
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -o-transition: opacity 1s;
    -moz-transition: opacity 1s;
}

p:hover + div.tooltip {
    opacity: 1.0;
    top: 0px; /*ADDED THIS AND REMOVED display:block*/
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -o-transition: opacity 1s;
    -moz-transition: opacity 1s;
}

然而，这不会消失（仅在中），因为它会在mouseout上移动它（所以它实际上会消失，但你看不到它，因为它在视口之外）..

Answer 2

说明

您只将transition放在opacity上，而当更改为display:block;时，默认情况下会将其显示为opacity:1;。

Solution

（的jsfiddle）

删除工具提示元素上的display:none;和display:block。