Display div (tooltip) in correct position on hover

Question

I have a form with a GridView and a table with images in it. The images have a div (tooltip) that shows up onmouseover. The div displays at the very bottom of the form and not close by the images like I want it to. How can I have the div display below and to the left of the image?

ascx code:

<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;  
}

score 0 · Accepted Answer · edited May 23 '17 at 10:25

0

One simple approach is to set the coordinates of your pop-up to the coordinates of the element that is clicked. Several good solutions are discussed here: Retrieve the position (X,Y) of an HTML element

Another approach, the one I prefer, involves embedding a tooltip div inside each div that contains an image. The parent div of the image will have relative position to set a positioning context (http://www.impressivewebs.com/absolute-position-css/). Then when you use absolute positioning, the tooltip is positioned relative to the div that contains the image.

edited May 23 '17 at 10:25

Community

1
1

answered Jan 15 '14 at 21:01

Harvey A. Ramer

763
7
13

Since I have the images in a table, how would I have embedded divs? – cocoa Jan 15 '14 at 21:34
Nevermind. Thank you very much for your help! I have a small issue though. For some reason I can only see the divs on the first tab on my page. I'm not sure why they aren't showing up on my other tabs. – cocoa Jan 15 '14 at 22:49
Each tab probably has a different table. You may need to change the markup for each of those tables to include a DIV. That's why I usually use JavaScript to insert that kind of DIV dynamically. – Harvey A. Ramer Jan 16 '14 at 18:01
If you choose to insert them dynamically using JavaScript with jQuery, you would do something like this http://jsfiddle.net/8jY4n/38/ – Harvey A. Ramer Jan 16 '14 at 19:34
Well, I decided to go with a different approach and its rather simple. I edited my code to have the divs in the table. It turns out I already had the jQuery plugin installed, and all I had to do was add `ToolTip=""` to my ascx and this code in my aspx `$(function () { $(document).tooltip(); });` – cocoa Jan 17 '14 at 19:54

Display div (tooltip) in correct position on hover

1 Answers1