Issue
I'm using flex to position some divs around. When I try using a tooltip inside one of the divs that has overflow-y: auto, the tooltip text causes the div to overflow even while invisible, and is clipped when visible.
This is so when the tooltip text has position: relative.
If not, then it is not clipped, and it doesn't cause the div to overflow... but it is not positioned at the right place!
Any ideas how to make it be on the right place, and not be clipped? I have seen a couple of answers here that seem related, but didn't manage to fix my problem based on them.
Here's a very simple code that displays the problem
.container {
display: flex;
flex-direction: row;
width: 140px;
height: 55px;
/* the following style clips the tooltiptext (if it has position relative) */
overflow-y: auto;
background-color: aqua;
/* to help see the overflow behaviour */
}
.container div {
flex: 1;
}
.tooltip {
width: 3em;
height: 1em;
background-color: yellow;
position: relative; /* comment this out to fix clipping */
}
.tooltip .tooltiptext {
width: 6em;
height: 2em;
position: absolute;
visibility: hidden;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
z-index: 1;
/* The following is only good if position is relative */
/* bottom: 125%; */
/* left: 50%; */
/* margin-left: -60px; */
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}<html>
<head>
</head>
<body>
<div class="container">
<div>867-5309</div>
<div class="tooltip">
Busy
<!-- If the position of the tooltiptext span is relative
it causes the div to overflow - even when hidden,
and the tooltiptext is clipped -->
<span class="tooltiptext">When calling on Jan 2000</span>
</div>
</div>
</body>
</html>Solution
Add display: contents; on your tooltip.
.container {
display: flex;
flex-direction: row;
width: 140px;
height: 55px;
/* the following style clips the tooltiptext (if it has position relative) */
overflow-y: auto;
background-color: aqua;
/* to help see the overflow behaviour */
}
.container div {
flex: 1;
}
.tooltip {
display: contents;
width: 3em;
height: 1em;
background-color: yellow;
position: relative;
/* comment this out to fix clipping */
}
.tooltip .tooltiptext {
width: 6em;
height: 2em;
position: absolute;
visibility: hidden;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
z-index: 1;
/* The following is only good if position is relative */
/* bottom: 125%; */
/* left: 50%; */
/* margin-left: -60px; */
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}<html>
<head>
</head>
<body>
<div class="container">
<div>867-5309</div>
<div class="tooltip">
Busy
<!-- If the position of the tooltiptext span is relative
it causes the div to overflow - even when hidden,
and the tooltiptext is clipped -->
<span class="tooltiptext">When calling on Jan 2000<https://stackoverflow.com/questions/71229271/overflow-clips-tooltip#/span>
</div>
</div>
</body>
</html>Answered By - カメロン
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.