I want to show tooltips next to items in a rather complex editor with custom scrolling. The tooltips should "escape" the container that has overflow: hidden
set to limit the viewport.
Here is an example that shows the problem:
.container {
border: 1px black solid;
width: 200px;
height: 200px;
overflow: hidden;
}
.inner {
display: flex;
flex-direction: column;
}
.row {
display: flex;
}
.column {
background-color: #99FF99;
padding: 25px;
}
.tooltip-container {
position: relative;
}
.content {
background-color: #9999FF;
width: 50px;
height: 50px;
}
.tooltip {
z-index: 1;
background-color: #FF9999;
display: none;
position: absolute;
left: 100%;
top: 0%;
white-space: nowrap;
}
.tooltip-container:hover .tooltip {
display: inline-block;
}
<div class="container">
<div class="inner" id="inner" style="margin-left: -40px; margin-top: -40px">
<div class="row">
<div class="column">
<div class="tooltip-container">
<div class="content">
1
</div>
<div class="tooltip">
Super nice and awesome and cool and hot 1
</div>
</div>
</div>
<div class="column">
<div class="tooltip-container">
<div class="content">
2
</div>
<div class="tooltip">
Super nice and awesome and cool and hot 2
</div>
</div>
</div>
<div class="column">
<div class="tooltip-container">
<div class="content">
4
</div>
<div class="tooltip">
Super nice and awesome and cool and hot 4
</div>
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="tooltip-container">
<div class="content">
3
</div>
<div class="tooltip">
Super nice and awesome and cool and hot 3
</div>
</div>
</div>
<div class="column">
<div class="tooltip-container">
<div class="content">
5
</div>
<div class="tooltip">
Super nice and awesome and cool and hot 5
</div>
</div>
</div>
<div class="column">
<div class="tooltip-container">
<div class="content">
6
</div>
<div class="tooltip">
Super nice and awesome and cool and hot 6
</div>
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="tooltip-container">
<div class="content">
7
</div>
<div class="tooltip">
Super nice and awesome and cool and hot 7
</div>
</div>
</div>
<div class="column">
<div class="tooltip-container">
<div class="content">
8
</div>
<div class="tooltip">
Super nice and awesome and cool and hot 8
</div>
</div>
</div>
<div class="column">
<div class="tooltip-container">
<div class="content">
9
</div>
<div class="tooltip">
Super nice and awesome and cool and hot 9
</div>
</div>
</div>
</div>
</div>
</div>
JSFiddle
Of course I searched for the problem and there are a lot solutions to the problem already. However I did not find one that solves my problem
The most cited solution is to make the tooltip position: absolute
and add a wrapper outside of the div with overflow:hidden
as can be seen here. This does not work in my case because the tooltip should be to the right of the item it describes. So I need the relative position on the tooltip container.
I tried wrapping the tooltip with position:relative
and some offset in a wrapper with position:absolute
. This did not work, as the wrapper catches the mouse hover for the tooltip. Also this means I have to know the size of the attached item.
I tried laying out the items in the tooltip-container
horizontally and then use the standard position:absolute
trick, but I could not make that work either.
Does anybody have an idea?
Constraints:
overflow:hidden
and should escape itUsing CSS, we can set the max width of the table cells, hide overflow and show ellipsis at the end of the overflowing text. When the user hovers over the long text, we can display the full content in a tooltip.
Enabling sticky tooltip To make an element display its tooltip permanently, we use its showTooltipOn property. To make tooltip always be shown, set it to "always" .
A tooltip is a user interface component containing text that appears when a user hovers their cursor over an element. A tooltip usually contains text that provides additional description, context, or instructions that users may want to know.
To display ToolTips, select the Show ToolTips box. To hide ToolTips, clear the Show ToolTips box.
The only CSS trick you can use is the position:fixed
that you block with a null transform and you can have most of your constraints:
body {
min-height:200vh;
transform:translate(0,0);
}
.container {
border: 1px black solid;
width: 200px;
height: 200px;
overflow: hidden;
}
.inner {
display: flex;
flex-direction: column;
}
.row {
display: flex;
}
.column {
background-color: #99FF99;
padding: 25px;
}
.tooltip-container {
position: relative;
}
.content {
background-color: #9999FF;
width: 50px;
height: 50px;
}
.tooltip {
z-index: 1;
background-color: #FF9999;
display: none;
position: fixed;
transform:translate(50px,-50px);
/*left: 100%;
top: 0%;*/
white-space: nowrap;
}
.tooltip-container:hover .tooltip {
display: inline-block;
}
<div class="container">
<div class="inner" id="inner" style="margin-left: -40px; margin-top: -40px">
<div class="row">
<div class="column">
<div class="tooltip-container">
<div class="content">
1
</div>
<div class="tooltip">
Super nice and awesome and cool and hot 1
</div>
</div>
</div>
<div class="column">
<div class="tooltip-container">
<div class="content">
2
</div>
<div class="tooltip">
Super nice and awesome and cool and hot 2
</div>
</div>
</div>
<div class="column">
<div class="tooltip-container">
<div class="content">
4
</div>
<div class="tooltip">
Super nice and awesome and cool and hot 4
</div>
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="tooltip-container">
<div class="content">
3
</div>
<div class="tooltip">
Super nice and awesome and cool and hot 3
</div>
</div>
</div>
<div class="column">
<div class="tooltip-container">
<div class="content">
5
</div>
<div class="tooltip">
Super nice and awesome and cool and hot 5
</div>
</div>
</div>
<div class="column">
<div class="tooltip-container">
<div class="content">
6
</div>
<div class="tooltip">
Super nice and awesome and cool and hot 6
</div>
</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="tooltip-container">
<div class="content">
7
</div>
<div class="tooltip">
Super nice and awesome and cool and hot 7
</div>
</div>
</div>
<div class="column">
<div class="tooltip-container">
<div class="content">
8
</div>
<div class="tooltip">
Super nice and awesome and cool and hot 8
</div>
</div>
</div>
<div class="column">
<div class="tooltip-container">
<div class="content">
9
</div>
<div class="tooltip">
Super nice and awesome and cool and hot 9
</div>
</div>
</div>
</div>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With