Prevent overflowing long tooltip text-CodePudding

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 >
  <a href="#/" >ICON <span >text1</span></a> 
  
  <a href="#/" >ICON <span >a bit longer tooltip text</span></a> 
  
  <a href="#/" >ICON <span >very long tooltip text goes here, and it should not overflow to the side</span></a> 
</div>

CodePudding user response：

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 >
  <a href="#/" >ICON <span >text1</span></a> 
  
  <a href="#/" >ICON <span >a bit longer tooltip text</span></a> 
  
  <a href="#/" >ICON <span >very long tooltip text goes here, and it should not overflow to the side</span></a> 
</div>