JS：工具提示在图标右侧的相对定位

Question

我有一个图标，当您将鼠标悬停在它上面时，我希望在图标右侧显示一个自定义 CSS 工具提示。无论您是向上还是向下滚动页面，工具提示都需要始终显示在图标的右侧。

不，我不想使用任何插件。我只想要一点 JS/CSS 来完成工作。如果使用JQuery，需要兼容v1.7，JQuery-UI：v1.8。

另外，需要兼容IE 6和7。

我更愿意将我的元素保留为兄弟元素，但看起来在某些情况下出现的 div 需要是子元素，所以如果需要更改 HTML 也没关系。

HTML：

<img src="" class="icon">ICON<img/>

<div class="demo">
    STUFF<br/>
    STUFF<br/>
    STUFF<br/>
    STUFF<br/>
    STUFF<br/>
</div>

CSS：

.demo {
    margin-left: 5px;
    padding: 10px;
    width: 265px;
    height: 110px;
    background-color: #ccc;
    position: relative;
    border: 2px solid #333;
}

.demo:after, .demo:before {
    border: solid transparent;
    content: ' ';
    height: 0;
    right: 100%;
    position: absolute;
    width: 0;
}

.demo:after {
    border-width: 11px;
    border-right-color: #ccc;
    top: 13px;
}

.demo:before {
    border-width: 14px;
    border-right-color: #333;
    top: 10px;
}

现场示例： http://jsfiddle.net/49Js3/16/

Answer 1

由于我的声誉不足以评论上面的答案，我只想添加一个更新的小提琴（基于上面的答案），绝对定位工具提示，但使用 display: inline-block 以便它是未从左侧固定到某个位置，将显示在右侧： 这是重要的一点：

a.tippy:hover + div {
    display: inline-block;
    position: absolute;
}

http://jsfiddle.net/7gmv3wo2/

Answer 2

在这里提琴：http://jsfiddle.net/49Js3/29/

我无法访问 IE6，所以我不知道它是否合法。我知道您需要一个锚点才能在 IE7 及更早版本中使用 CSS 获得悬停行为。

所以，我在您的图像周围添加了一个锚点，以及一个包含工具提示的 div。

HTML

<div class="outer">
<a class="tippy" href="">
        <img src="" class="icon">ICON<img/>
   </a>

    <div class="demo">STUFF
        <br/>STUFF
        <br/>STUFF
        <br/>STUFF
        <br/>STUFF
        <br/>
    </div>
</div>

这是 CSS：

.tippy {
    text-decoration: none;
}
.outer {
    width: 350px;
}
a.tippy:hover + div {
    display:block;
    float: right;
}
.demo {
    margin-left: 5px;
    padding: 10px;
    width: 265px;
    height: 110px;
    background-color: #ccc;
    position: relative;
    border: 2px solid #333;
    display: none;
}
.demo:after, .demo:before {
    border: solid transparent;
    content:' ';
    height: 0;
    right: 100%;
    position: absolute;
    width: 0;
}
.demo:after {
    border-width: 11px;
    border-right-color: #ccc;
    top: 13px;
}
.demo:before {
    border-width: 14px;
    border-right-color: #333;
    top: 10px;
}