Question

我有一个带有GridView的表单和一个包含图像的表。图像有一个显示onmouseover的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定位。

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

1 个答案: