Question

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

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

此外，需要与IE 6和7兼容。

我更愿意将我的元素保留为兄弟姐妹，但在某些情况下，看起来似乎必须是子元素，所以如果需要更改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

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

Answer 2

由于我的声誉不够高，无法对上面的答案发表评论，所以我只想添加一个更新的小提琴（基于上面的答案），该小提琴可以绝对定位工具提示，但带有display：inline-block，因此不固定在左侧的某个位置，而是显示在右侧：这是重要的一点：

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

http://jsfiddle.net/7gmv3wo2/

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

2 个答案: