html - 带有空格的工具提示最大宽度：nowrap

Question

我正在尝试对工具提示进行过度架构。目标是工具提示抽象不了解广泛的上下文（文档）。相反，它应该被放置在一个元素中并且可以正常工作。

但是，我很难实现最大宽度行为：

可以理解的是，由于内容具有white-space: nowrap.

但是，没有它，我将面临这个问题：

帮助我修复布局，以便我可以获得正确的最大宽度行为。具体来说，当行中没有更多空间时，将内容换行。

这是示例：https ://jsbin.com/fucujak/3/edit?html,css,output

helper {
  display: inline-block;
  position: relative;
  top: 30%;
  left:30%;
  padding: 10px;
  background: green;
  color: white;
  border-radius: 300px
}

tooltip {
  display: block;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

tooltip:hover tooltip-anchor {
  display: block;
}

tooltip-anchor {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0;
  height: 0;
}
tooltip-container {
  display: block;
  position: absolute;
}
tooltip-positioner {
  display: block;
  position: relative;
  left: -50%;
}
tooltip-content {
  display: block;
  padding: 10px;
  /* white-space: nowrap; */
  background: blue;
  color: white;
  max-width: 100px;
}

  <helper>
    i
    <tooltip>
      <tooltip-anchor>
        <tooltip-container>
          <tooltip-positioner>
            <tooltip-content>
              Some long, extended tooltip content
            </tooltip-content>
          </tooltip-positioner>
        </tooltip-container>
      </tooltip-anchor>
    </tooltip>
  </helper>

Answer 1

您可以简单地执行以下操作：

helper {
  display: inline-block;
  position: relative;
  top: 30%;
  left: 30%;
  padding: 10px;
  background: green;
  color: white;
  border-radius: 300px
}

tooltip {
  position: absolute;
  display:none;
  top: 100%; /* place at bottom*/
  /* center*/
  left:50%;
  transform:translateX(-50%);
  /**/
  margin-right: -200px; /* this is the trick that will make sure the content can go up to 180px (an arbitrary big value) */
  max-width:180px; /* your max-width*/
  padding:10px;
  background:blue;
}
helper:hover tooltip {
 display:block;
}

<helper>
  i
  <tooltip>
    Some long, extended tooltip content
  </tooltip>
</helper>

<helper>
  i
  <tooltip>
    Some long
  </tooltip>
</helper>