悬停时在正确位置显示 div（工具提示）

Question

我有一个带有 GridView 的表单和一个带有图像的表格。图像有一个 div （工具提示），显示在鼠标悬停上。 div 显示在表单的最底部，而不是像我想要的那样靠近图像。如何让 div 显示在图像的下方和左侧？

ascx 代码：

<table>
<tr>
<asp:Label ID="Tools" runat="server" Text="Tools" />
<div style="display: inline; position:relative; ">
<asp:ImageButton ID="CSV" ToolTip="CSV" runat="server" ImageUrl="document-excel-csv-icon.png"
OnClick="BtnCSV_Click" onmouseover="showToolTip_CSV()" onmouseout="hideToolTip_CSV()" />
<div id="tooltip-CSV" role="tooltip" class="tooltip" style="display: none;" >
 <label ID="CSV_label">CSV</label>
</div>
</div>
<div style="display: inline; position: relative;">
<asp:ImageButton ID="PDF" ToolTip="PDF" runat="server" ImageUrl="document-pdf-icon.png" 
OnClick="BtnPDF_Click" onmouseover="showToolTip_PDF()" onmouseout="hideToolTip_PDF()" />                            
<div id="tooltip-PDF" role="tooltip" class="tooltip" style="display: none;">
<label ID="PDF_Label">PDF</label>
</div> 
</div>
</td>
</tr>        
</table>

javascript

<script type="text/javascript">
function showToolTip_CSV() {
    document.getElementById("tooltip-CSV").style.display = "inline-block";
}    
function showToolTip_PDF() {
         document.getElementById("tooltip-PDF").style.display = "inline-block";
}   
function hideToolTip_CSV() {
     document.getElementById("tooltip-CSV").style.display = "none";
 }
function hideToolTip_PDF() {
     document.getElementById("tooltip-PDF").style.display = "none";
 }
</script>

css

.tooltip
{        
width: 30px;
padding: 10px;    
position: absolute;
left: 10px;
bottom: -20px;
background: #f4f0ec;
border: 2px solid #e0cfc2;
border-radius: 6px;  
}

Answer 1

一种简单的方法是将弹出窗口的坐标设置为被点击元素的坐标。这里讨论了几个好的解决方案：Retrieve the position (X,Y) of an HTML element

我更喜欢的另一种方法是在每个包含图像的 div 中嵌入一个工具提示 div。图像的父 div 将具有相对位置来设置定位上下文 (http://www.impressivewebs.com/absolute-position-css/)。然后，当您使用绝对定位时，工具提示将相对于包含图像的 div 定位。