basically, I'm having issues displaying a tooltip inside a <td> element that has the overflow hidden property. The tooltip text class will pop up on hover, but it's cut off due to overflow hidden. The parent (div) must have the relative position and the child (tooltip) must have the absolute position, this is because it needs to be dynamic as every td needs to have it's own tooltip (popping up next to it). Fyi, the text is populated via a json string).
I've seen a lot of examples online, but I don't think they include a <td> solution with overflow hidden and tooltip.
Any help will be great, thanks.
I have this html/css structure:
.advice-given-class {
position: relative;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.advice-given-class .tooltiptext {
z-index: 10;
display: none;
padding: 14px 20px;
bottom: 20px;
left: 0;
width: 240px;
line-height: 16px;
position: absolute;
}
.advice-given-class:hover .tooltiptext {
display: inline;
color: #ffffff;
border: 1px solid #DCA;
background: #444;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
}
.tooltiptext:after {
position: absolute;
display: block;
content: "";
border-style: solid;
border-width: 8px;
height: 0;
width: 0;
border-color: #444 transparent transparent transparent;
bottom: -16px;
left: 14px;
}<td>
<div class="advice-given-class">
texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext
<span class="tooltiptext">
text from json string
</span>
</div>
</td>you can use
position: fixed; to break overflow rulemargin-top : negative height of element to up the tooltip above element#bigarea {
height: 120px;
}
table {
border: solid 1px black;
}
.advice-given-class {
position: relative;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.advice-given-class .tooltiptext {
z-index: 10;
display: none;
padding: 14px 20px;
width: 240px;
line-height: 16px;
position: fixed;
margin-top: -50px;
left: 15px;
}
.advice-given-class:hover .tooltiptext {
display: inline;
color: #ffffff;
border: 1px solid #DCA;
background: #444;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
}
.tooltiptext:after {
position: absolute;
display: block;
content: "";
border-style: solid;
border-width: 8px;
height: 0;
width: 0;
border-color: #444 transparent transparent transparent;
bottom: -16px;
left: 14px;
}<div id="bigarea"></div>
<table>
<td>
<div class="advice-given-class">
texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext texttexttexttexttexttexttext
<span class="tooltiptext">
text from json string
</span>
</div>
</td>
</table>