css - 如何用绝对位置给出最大宽度

Question

.tooltip{
  display: inline-block;
  position: relative;
}
.tooltip-outer  {
  visibility: hidden;
  position: absolute;
  z-index: 1070;
  display: block;
  margin: 0;
  font-size: 13px;
  word-wrap: break-word;
  opacity: 0;
  text-align: left;
}

.tooltip-inner  {
   max-width: 200px;
   padding: 3px 8px;
   color: #fff;
   background-color: #000;
   border-radius:2px;
}

.tooltip:hover .tooltip-outer{
    visibility: visible;
    opacity: 1;
}

[tooltip-direction = 'right']
{
  left:100%;
  top:50%;
  margin-left:8px;
  transform: translateX(0%)   translateY(-50%);
}

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<div class="tooltip">
  hover me
  <div class="tooltip-outer" tooltip-direction="right">
    <div class="tooltip-inner">
      Don't let fear or insecurity stop you from trying new things.
    </div>
  </div>
</div>

在上面的代码中，我为父级使用了相对位置，为子级使用了绝对位置，因此，我的最大宽度没有被考虑。

如何设置绝对位置的最大宽度？

Answer 1

只需尝试将 width: max-content; 添加到绝对定位的元素以拉伸(stretch)其内容。

.tooltip-outer  {
  position: absolute;
  width: max-content;
}