JS:工具提示在图标右侧的相对位置

JS: Relative positioning of tooltip on right of icon

本文关键字：相对 位置 图标 工具提示 JS      更新时间：2023-09-26

我有一个图标，当您将鼠标悬停在它上面时，我希望在图标右侧显示一个自定义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/

由于我的声誉不足以评论上面的答案，我只想添加一个更新的小提琴（基于上面的答案），它绝对定位工具提示，但带有 display：inline-block，这样它就不会固定在左侧的某个位置，而是向右显示：这是重要的一点：

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

http://jsfiddle.net/7gmv3wo2/

在这里小提琴：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;
}
相关文章：