纯CSS：悬停文字上方的中心工具提示pt。 3

Question

Mark Boulder在Pure CSS: Center Tooltip Above Text On Hover pt. 2上进行扩展。

我需要做完全相同的事情，除了我的工具提示在文本下方且不能为white-space: nowrap：我只想为工具提示定义一个常量max-width，然后该常量将适应它的大小取决于其内容，直到达到该值并显示在更多行上。

我所拥有的：

我需要什么：

比父级薄\ \ \ \ \比父级更大\ \ \ \ \ \达到最大宽度时中断换行

CSS：

    .drag-hint {
      position: relative;
      margin: 20px 80px;
      display: inline-block;
      padding: 0 1em;
      border: 1px solid red;
    }
    .drag-hint > span {
      background: black;
      color: white;
      display: none;
    }
    .drag-hint:hover > span {
      max-width: 160px; /* useless for now */
      display: inline-block;
      position: absolute;
      top: 25px;
      left: 50%;
      transform: translateX(-50%);
    }

    <span class="drag-hint">
        <span>Blah.</span>
        Hover me
    </span>

    <span class="drag-hint">
        <span>Blah blah blah blah.</span>
        Hover me
    </span>

    <span class="drag-hint">
        <span>Blah blah blah blah blah blah blah.</span>
        Hover me
    </span>

您能看到纯HTML / CSS解决方案吗？

Answer 1

您尝试过flexbox吗？我对工具提示的处理还不多，但是我喜欢flexbox来使不需要居中的内容居中。如果您不熟悉，https://css-tricks.com/snippets/css/a-guide-to-flexbox/是快速获取基础知识的好地方。像

.drag-hint {
  display: flex;
  align-items: center;
};

可能就是您所需要的。

Answer 2

知道了-文本出现在这样的列中的原因是因为您的inline-block。内联块元素没有宽度，除非您明确设置一个宽度。您只需在悬停规则中添加width: 100%;即可解决此问题，该规则将覆盖该问题。