Tooltip Positioning Problem

HTML-CSS
1

I’m a guitar player, not a coder…but I have a guitar lesson site. Anyway, in the code below, I’m trying to get the BOTTOM of the tooltip to always be just above the line it hovers over. It should behave this way regardless of the amount of text in the tooltip, and regardless of the length of the the text in the line it hovers over. (I tried using “margin-bottom:” but it didn’t work at all for me.) If I’m doing it the wrong way or in a very messy way I wouldn’t be surprised. (First time to try posting code…hope it works.) Thanks.

<style type="text/css">
.toolTipDiv {
	float: none;
	width: 275px;
	margin-left: 20px;
}
.toolTipLink a {
display: block;
color: #202020;
background-color: transparent;
width: auto;
padding: 0px 10px;
text-decoration: none;
font-size: 12px;
margin-left: 0px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #878787;
line-height: 17px;
}
.toolTipLink a:hover {
background-color: #ddd;
color: #9B0E11;
padding-left: 10px;
}
a.tooltip span {
z-index: 10;
display: none;
padding: 7px 10px;
 margin-top: -80px; 
/* this doesn't do anything:
margin-bottom: [any value]px;
*/
margin-left: 200px;
width: 140px;
line-height: 16px;
opacity: 0.85;
}
a.tooltip:hover span{
display:inline; 
position:absolute; 
color:#EEE;
background:#000  
repeat-x 0 0;
}
</style>
<body>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>

<div class="toolTipDiv">

<span class="toolTipLink"> 

<a href="_lessons/_beginner/054-Basic-Boogie-Rock.html" target="_blank" class="tooltip">
<div class="tooltipWrapper">
<div class="toolTipEdge">Medium amount of text in this line.</div>
<span>I want the bottom of every tooltip to be at the top of every line it hovers over.</span>
</div>
</a> 

<a href="_lessons/_beginner/054-Basic-Boogie-Rock.html" target="_blank" class="tooltip">
<div class="tooltipWrapper">
<div class="toolTipEdge">This is the text that will be hovered over. Sometimes it may be this long</div>
<span>The bottom of this tooltip is too low. It should be just above the line.</span>
</div>
</a> 

<a href="_lessons/_beginner/054-Basic-Boogie-Rock.html" target="_blank" class="tooltip">
<div class="tooltipWrapper">
<div class="toolTipEdge">Here is a shorter line of text.</div>
<span>Sometimes the text in the "tooltip" will be a couple sentences long. If the tooltip text is ong or if it is short, the bottom of the tooltip should be right above the hovered line.</span>
</div>
</a> 

<a href="_lessons/_beginner/054-Basic-Boogie-Rock.html" target="_blank" class="tooltip">
<div class="tooltipWrapper">
<div class="toolTipEdge">Medium amount of text in this line.</div>
<span>This tooltip is way too high.</span>
</div>
</a> 

</span> 
</div>
</body>
2

The .toolTipEdge would need to be the parent of the tooltip span and be using position relative. Then you can absolutely position the span relative to its parent (e.g. bottom: 100%;).

https://www.w3schools.com/css/css_tooltip.asp

1 Like
3

Just as a quick example, the horizontal positioning is slightly randomly picked but it also depends on the amount of text in the parent.

Edit: Codepen doesn’t allow for anonymous Pens anymore, I update the link.

https://codepen.io/lasjorg/pen/ExPNojJ

You may also want to check out Tooltip.js.

1 Like
4

lasjorg: Thanks a million. I’ve been struggling with this for a few days. Your CodePen example is getting very close. Could you make it so the tooltip is triggered when the cursor is anywhere over the tootipWrapper? And could you make it so the tooltip always has the same horizontal placement? --say 200px from the left?

5

Don’t use px values, use percentages (10%).
The reason why is because that px value will always be the same across every screen, meaning the tooltip will (not may, will) be partly / completely off the screen at some width.

1 Like
6

I updated the anonymous pen, I forgot that saving it doesn’t make a new one so the old is gone, hopefully, that is OK.

I removed the toolTipEdge div/class and move the hover to the tooltipWrapper div. You can adjust the value for the left property as you see fit, the tooltip horizontal position is now relative to the box, not the text. I had to move the padding from the link to the container but it looks the same (otherwise the hover wouldn’t trigger at the edge).

1 Like
7

Thanks a ton. A guy on another forum also tweaked it such that it works. I may try to compare yours vs. his. I have a hunch yours is more efficient. I’m not allowed to include links yet, but if you go to codepen you might find it with this (if you’re curious):
jkarkosza/pen/WmopbP