Javascript JS：图标右侧工具提示的相对位置

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

不，我不想使用任何插件。我只是想要一点JS/CSS来完成这项工作。如果使用JQuery，它需要与v1.7和jQueryUI: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>

.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;
}

现场示例：

在这里拉小提琴：

我没有访问IE6的权限，所以我不知道它是否合法。我知道你需要一个锚来获得IE7和更早版本中CSS的悬停行为

因此，我在图像周围添加了一个锚，以及一个div来包含工具提示

HTML

在这里拉小提琴：

我没有访问IE6的权限，所以我不知道它是否合法。我知道你需要一个锚来获得IE7和更早版本中CSS的悬停行为

因此，我在图像周围添加了一个锚，以及一个div来包含工具提示

HTML

---

由于我的声誉不足以对上述答案发表评论，我只想添加一个更新的提琴（基于上述答案），该提琴绝对定位工具提示，但带有display:inline块，因此它不会固定在左侧的某个位置，并将显示在右侧： 以下是重要的一点：

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

---

由于我的声誉不高，无法对上述答案发表评论，我只想添加一个更新的提琴（基于上述答案），该提琴绝对定位工具提示，但带有display:inline块，因此它不会固定在左侧的某个位置，并将显示在右侧： 以下是重要的一点：

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

---

看起来很棒。为了让左箭头显示在图标旁边，我添加了

边距顶部：-15px

这是您会推荐的，还是您会推荐另一种方式？请看小提琴：这在Chrome、FF、IE8和IE9中运行良好。然而，在IE7中，div下面的内容被向下推。有什么办法可以避免吗？@Keven，通常情况下，您会添加一个覆盖规则，该规则具有IE7特有的不同左上角值。您需要在启动时检测ie7（从用户代理标题），并将marker类附加到body元素以实现此目的。因此，在尝试将其放入我自己的网站后，我发现当内容较长时，DIV实际上会在Chrome、FF和IE中向下推送其他内容。我希望DIV显示在文本上方。我更新了小提琴，让你明白我的意思：@Keven好吧，我有一个更新给你，修复了这个问题：看起来很棒。为了让左箭头显示在图标旁边，我添加了

边距顶部：-15px

这是您会推荐的，还是您会推荐另一种方式？请看小提琴：这在Chrome、FF、IE8和IE9中运行良好。然而，在IE7中，div下面的内容被向下推。有什么办法可以避免吗？@Keven，通常情况下，您会添加一个覆盖规则，该规则具有IE7特有的不同左上角值。您需要在启动时检测ie7（从用户代理标题），并将marker类附加到body元素以实现此目的。因此，在尝试将其放入我自己的网站后，我发现当内容较长时，DIV实际上会在Chrome、FF和IE中向下推送其他内容。我希望DIV显示在文本上方。我更新了小提琴来告诉你我的意思：@Keven好的，我有一个更新来帮你修复这个问题：

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