向工具提示添加 CSS 标注

Question

我想在每次用户悬停特定 span.class 时显示一个工具提示 我有一些代码在工作，但不幸的是，它要么显示工具提示，要么……只显示标注。

这是我的code：

HTML：

<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<br>
<br>
<span class="rnd">[<span class="pos">suffix</span>] Some random text..............</span>
    <a href="#" class="tooltip">Tooltip<span>what a <u>rainy</u> day.</span></a>

CSS：

.tooltip {
    outline:none;
}
.tooltip strong {
    line-height:30px;
}
.tooltip:hover {
    text-decoration:none;
}
.tooltip span {
    z-index:10;
    display:none;
    padding:14px 20px;
    margin-top:30px;
    margin-left:-160px;
    width:240px;
    line-height:16px;
}
.tooltip:hover span {
    display:inline;
    position:absolute;
    border:2px solid #FFF;
    color:#EEE;
    background:#000;
}
.tooltip span {
    border-radius:2px;
    box-shadow: 0px 0px 8px 4px #666;
    opacity: 0.8;
}
.pos {
    font-weight: bold;
    display: inline;
    position: relative;
    text-decoration: none
}
.pos:hover:before {
    display:inline;
    border: solid;
    border-color: #333 transparent;
    border-width: 0px 6px 6px 6px;
    bottom: -20px;
    content:"";
    left: 50%;
    position: absolute;
    z-index: 99;
    font-style: normal;
}

我希望它看起来像这样： http://jsfiddle.net/Lu3G8/

Answer 1

http://jsfiddle.net/5hMs8/2/

<span class="tooltip pos">suffix<span>An affix that follows the element to <u>which</u> it is added, as <i>-ly</i>  in <i>kindly</i>.</span></span>

我将 CSS (.pos:hover:before) 从 bottom: -30px 更改为 bottom: -12px。