Search code examples
htmlcsstwitter-bootstraptooltip

More tooltips around single picture

Suppose that I have a rounded centerend "element". How to show 7 different tooltips around that element on mouse over at same time? (see the attached JPG).enter image description here

Solution

  • You can use 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>

    Working fiddle https://jsfiddle.net/nx533fq2/1/

    Of course use position where you want to put tooltips, I have just made you and example