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;默认显示为一个块.

解

(的jsfiddle)

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