One issue I'm encountering is that sometimes my tooltip doesn't fully appear on the screen. When my div is at the top of the screen, the tooltip gets cut off.
This is a snippet from my JSP page:
<div onmouseover="hideElementsByClassName('tooltip');displayElementById('toolip-42');" onmouseleave="hideElementById('toolip-42')">
<img src="IMG/bouton/test.png">
<div id="toolip-42" class="toolip" style="display: none;">
<span style="font-weight: bold; font-size: 16px;">
<table>
...
...
</table>
</span>
</div>
</div>
Here's the CSS for the tooltip:
.tooltip {
width: 800px;
position: absolute;
color: #000000;
background-color: #FFFFFF;
z-index: 1;
border: 2px solid #C3C3C3;
padding: 10px;
border-radius: 5px;
margin-top: -455px;
margin-left: 55px;
min-height: 400px;
max-height: 80%;
overflow: auto;
}
I want the tooltip to always show up on the right side of my image <img> without being cut off :
- When I'm at the top of my screen, the tooltip should be displayed in the middle-bottom of the image.
- When I'm in the middle of my screen, the tooltip should be shown in the center of the screen.
- When I'm at the bottom of my screen, the tooltip should display in the middle-top of the screen.