jQuery工具提示絕對定位

Question

我想以絕對的方式修復我的Jquery工具提示的位置。 無論鼠標在何處或懸停在什么位置，工具提示都需要顯示在該位置，這是div的函數。 比方說，div的左下角。 它不是靜態div的工具提示。 但我不想將工具提示轉換為div。

例如，是否設置工具提示，以使工具提示的左上角由與特定容器div相關的坐標設置？

如果需要的it這是一個很好的jsfiddle 。

Answer 1

如果准備HTML時知道工具提示的內容，則可以使用CSS。

這是一個例子。 （需要一些樣式方面的工作）

 .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>