Показывать 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

Один простой подход состоит в том, чтобы установить координаты вашего всплывающего окна в соответствии с координатами элемента, по которому щелкают. Здесь обсуждается несколько хороших решений: получить позицию (X,Y) HTML-элемента

Другой подход, который я предпочитаю, включает в себя вставку всплывающей подсказки в каждый div, содержащий изображение. Родительский div изображения будет иметь относительную позицию для установки контекста позиционирования ( http://www.impressivewebs.com/absolute-position-css/). Затем, когда вы используете абсолютное позиционирование, всплывающая подсказка позиционируется относительно div, содержащего изображение.