I have these three icons, could be more, with tooltips which have the position: absolute;, and the whole icon part is aligned to the right. When hovering the icon, a tooltip appears, and in the case of the short text, it looks fine. However there is a problem, especially with the last tooltip, if there is a longer text.
It overflows to the right or just appears in a bad way, and what I'm trying to achieve is that when there is a long text, the tooltip should shift the position somehow to the left, so it's entirely visible... It would be great if this could be done in CSS only, but any working solution would be great. Thanks for any tips.
.container {
background: darkgrey;
padding: 20px 20px 50px;
display: flex;
width: 400px;
justify-content: flex-end;
}
.icon {
font-size: 20px;
color: white;
margin-right: 20px;
position: relative;
display: flex;
justify-content: center;
}
.container .icon:hover .tooltip {
visibility: visible;
}
.tooltip {
color: #fff;
position: absolute;
visibility: hidden;
font-size: 12px;
top: 30px;
min-width: 200px;
text-align: center;
}<div class="container">
<a href="#/" class="icon">ICON <span class="tooltip">text1</span></a>
<a href="#/" class="icon">ICON <span class="tooltip">a bit longer tooltip text</span></a>
<a href="#/" class="icon">ICON <span class="tooltip">very long tooltip text goes here, and it should not overflow to the side</span></a>
</div>I think you can use element.scrollWidth | element.clientWidth and element.getBoundingClientRect() to calculate if the tooltips go out of the window but i makes a lot of calculation for a simple probleme
Maybe you can juste create a class tooltip-left where element are moved to the right :
.container {
background: darkgrey;
padding: 20px 20px 50px;
display: flex;
width: 400px;
justify-content: flex-end;
}
.icon {
font-size: 20px;
color: white;
margin-right: 20px;
position: relative;
display: flex;
justify-content: center;
}
.container .icon:hover .tooltip {
visibility: visible;
}
.tooltip {
color: #fff;
position: absolute;
visibility: hidden;
font-size: 12px;
top: 30px;
min-width: 200px;
text-align: center;
}
.tooltip-left {
right:25%;
text-align: right;
}<div class="container">
<a href="#/" class="icon">ICON <span class="tooltip">text1</span></a>
<a href="#/" class="icon">ICON <span class="tooltip">a bit longer tooltip text</span></a>
<a href="#/" class="icon">ICON <span class="tooltip tooltip-left">very long tooltip text goes here, and it should not overflow to the side</span></a>
</div>