有关单张图片的更多工具提示

Question

假设我有一个圆形的中心端 "element"。如何在鼠标悬停时同时围绕该元素显示 7 个不同的工具提示？（见附件 JPG）。

Answer 1

你可以使用nt-child。

a.tooltip span {
    z-index:10;
    display:none;
}

a.tooltip:hover span:first-child {
    display:block;
    position:absolute;
    background:blue;
    left:0px;
    top:0px;
}

a.tooltip:hover span:nth-child(2) {
    display:block;
    position:absolute;
    left:60px;
    top:0px;
    background:red;
}

a.tooltip:hover span:nth-child(3) {
    display:block;
    position:absolute;
    left:60px;
    top:20px;
    background:yellow;
}

a.tooltip:hover span:nth-child(4) {
    display:block;
    position:absolute;
    left:0px;
    top:20px;
    background:green;
}

HTML

<!--First tooltip-->
<a href="#" class="tooltip">
    Tooltip
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</a>

工作fiddle https://jsfiddle.net/nx533fq2/1/

当然使用你想放置工具提示的位置，我刚刚给你做了例子

有关单张图片的更多工具提示

More tooltips around single picture

html

css

twitter-bootstrap

tooltip