Jquery tooltip absolute positioning

Question

I would like to fix the positioning of my Jquery tooltip in an absolute way. No matter where my mouse goes or what it hovers, the tooltip needs to appear at the place, as a function of a div. Say, the bottom left corner of a div. It's not so much of a tooltip as a static div. But I am not looking to convert the tooltip to a div.

Is it for example to set the tooltip so that the top left corner of the tooltip is set by a coordinate, which relates to a specific container div?

Here's a good jsfiddle if you need it .

Answer 1

If you know your tooltip content when preparing html, you can use css.

Here is an example. (Needs some work on styling)

 .box { position: relative; width: 200px; height: 50px; margin-bottom: 70px; background-color: blue; } .tooltip { display: none; border: 1px solid black; padding: 10px; background-color: white; position: absolute; } /* here are your coordinates */ .box_tooltip_right .tooltip { left: calc(100% + 5px); top: 0; } /* here are your coordinates for bottom tooltip */ .box_tooltip_bottom .tooltip { left: 0; top: calc(100% + 5px); width: 100%; box-sizing: border-box; text-align: center; } .hoverbox:hover .tooltip { display: block; } 

 <div class="box box_tooltip_bottom"> <div class="hoverbox"> <div class="tooltip">I am tooltip bottom 1</div> Tooltip bottom 1 </div> <div class="hoverbox"> <div class="tooltip">I am tooltip bottom 2</div> Tooltip bottom 2 </div> </div> <div class="box hoverbox box_tooltip_right"> <div class="tooltip">I am tooltip right</div> Tooltip right </div>