防止长工具提示文本溢出

Question

我有这三个图标，可能更多，工具提示有position: absolute;，整个图标部分向右对齐。将图标悬停时，会显示一个工具提示，如果是短文本，则看起来很好。但是，如果有较长的文本，则会出现问题，尤其是最后一个工具提示。

它溢出到右边，或者只是以一种糟糕的方式出现，我试图实现的是，当有一个长文本时，工具提示应该以某种方式将位置向左移动，这样它就完全可见了。。。如果这只能在CSS中完成，那就太好了，但任何可行的解决方案都会很棒。谢谢你的提示。

.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>

Answer 1

我认为你可以使用element.scrollWidth|element.clientWidth和element.getBoundingClientRect((来计算工具提示是否超出窗口，但我为一个简单的问题做了很多计算

也许您可以在元素移动到右侧的左侧创建一个类工具提示：

.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>