如何给出绝对位置的最大宽度

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

.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:80px; /*change this line*/
  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 2

您必须同时定义宽度和最大宽度

实施例

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

希望这会对你有所帮助