CSS 工具提示不会拉伸，只能有固定宽度答案

【问题标题】：CSS tooltips won't stretch, can only have fixed widthCSS 工具提示不会拉伸，只能有固定宽度
【发布时间】：2013-01-26 15:47:25
【问题描述】：

我有一些工具提示，其内容可以很长也可以很短。我不想拥有 3 个单词的内容并拥有一个巨大的工具提示，但我也不想要 20 个单词并将它们全部压缩成多行。在当前的设置下，无论如何它都会停留在最小宽度。

CSS：

.tooltip {
  outline: none; position: relative;
  min-width: 75px; max-width: 255px;
}

.tooltip .tool-content {
  opacity: 0; visibility: hidden;
  position: absolute;
}

.tooltip:hover .tool-content {
  background: #999; border: 1px solid #555; color: #000000;

  /* general styling */
  position: absolute; left: 1.3em; top: 2.6em; z-index: 99;
  visibility: visible; opacity: 1;
}

HTML：

<div class='tooltip'>
(content to hover)
    <span class='tool-content'>
        (tooltip content)
    </span>
</div>

让我烦恼的是我可以取消 position: relative 并且它按预期工作！然而我找不到任何解决方法，相对定位是 CSS 悬停的关键（或似乎是？）。

【问题讨论】：

我猜你的意思是，当你不在工具提示上使用position:absolute; 时它不会工作？这是因为工具提示的大小不能超过其容器的大小，当相对定位而不设置显式宽度时。
在 IE9 和 Chrome 中对我来说很好（不确定它在所有浏览器/情况下的表现如何）：jsfiddle.net/EE3Ys
确实我很尴尬地说它确实有效；对于这个例子，我去掉了我认为不需要的东西。 .tooltip 被附加到一个设置了宽度的 div 上，它覆盖了工具提示的宽度。将其移至该 div 的子级即可解决。谢谢。

标签： html css position tooltip

【解决方案1】：

两件事，第一，你看到的例子有width: 120px;，它控制宽度。将其更改为您需要修复的任何内容。

或者如果您不想固定宽度，只需添加white-space: nowrap; 以便文本显示在一行中而无需换行。

更新：您可以使用display: block;，以便工具提示的最大宽度达到父宽度，请参见下面的示例

<!DOCTYPE html>
<html>
<style>
  .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
  }
  
  .tooltip .tooltiptext {
    visibility: hidden;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    /* Position the tooltip */
    position: absolute;
    display: block;
    z-index: 1;
  }
  
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }
</style>

<body style="text-align:center;">

  <p>Move the mouse over the text below:</p>

  <div class="tooltip">Hover over me
    <span class="tooltiptext">Tooltip text</span>
  </div>
  <br><br>
  <div class="tooltip">Hover over me Hover over me
    <span class="tooltiptext">Tooltip text very very very very very very very very long</span>
  </div>
  <br><br>
  <div class="tooltip">Hover over me Hover over me 3
    <span class="tooltiptext">Tooltip text very very very very very very very very long very very very very very very very very long very very very very very very very very long very very very very very very very very long very very very very very very very very long very very very very very very very very long very very very very very very very very long</span>
  </div>
</body>

</html>

选项2，使用带有自定义悬停效果的引导工具提示，让它变得非常简单：

$(document).ready(function() {
  var originalLeave = $.fn.tooltip.Constructor.prototype.leave;
  $.fn.tooltip.Constructor.prototype.leave = function(obj) {
    var self = obj instanceof this.constructor ?
      obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
    var container, timeout;

    originalLeave.call(this, obj);

    if (obj.currentTarget) {
      container = $(obj.currentTarget).siblings('.tooltip')
      timeout = self.timeout;
      container.one('mouseenter', function() {
        clearTimeout(timeout);
        container.one('mouseleave', function() {
          $.fn.tooltip.Constructor.prototype.leave.call(self, self);
        });
      })
    }
  };

  //init all tooltip
  $('body').tooltip({
    selector: '[data-toggle=tooltip]',
    trigger: 'hover',
    delay: {
      hide: 50
    }
  });
});

.centered {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
}

.tooltip-inner {
  max-width: 500px !important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<ul class="list-inline centered">
  <li><a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Left</a></li>
  <li><a href="#" data-toggle="tooltip" data-placement="right" title="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.">Right</a></li>
</ul>

【讨论】：

好吧，我可能说得太早了。这确实会动态缩放工具提示文本，但如果文本比工具提示长（即您将鼠标悬停在上面的内容），则工具提示文本弹出窗口不再位于工具提示的中心（如页面 I 上的“底部”示例）链接）。
是的......因为我的一些工具提示实际上是段落，所以 nowrap 不会飞。它只是切断了它们。它需要动态地将宽度缩放到最大宽度，然后将文本换行到下一行。抱歉，我知道“纯编程问题”显然是题外话，但我不知道如何实现这些。它只是不工作。
我无法将工具提示的长度限制为父宽度，它几乎总是会更长。
我一直在玩空白设置。我想要的是它听起来像 pre-wrap 应该做的事情（在必要时和换行符处换行），但在实践中它不是这样工作的。即使最大宽度为 500 像素，它仍然会以 80 像素的宽度换行。
@L.Blissett 那么我建议使用引导工具提示，如果您检查更新的代码（选项 2）非常易于使用，并且您可以通过 css 设置最大宽度。

【解决方案2】：

也许……

width: max-content; 
max-width: 200px; (as much as you want)

【讨论】：

这确实有效，并且对本页面上的其他解决方案没有任何限制！ caniuse.com/mdn-css_properties_width_max-content
为什么这个答案没有得到更多的选票？我假设它是新的？它对我来说就像魔法一样，虽然我的情况可能很简单。
迄今为止最简单、最一致的解决方案，谢谢

【解决方案3】：

.tooltip {
  outline: none;
  position: relative;
  width: 75px;
  min-width: 75px;
  max-width: 255px;
}

.tooltip .tool-content {
  margin:0;
  padding:0;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  width:100%;
  height:100%;
}

您可以删除 span 并将其替换为块级元素（例如 div 样式为 display:block）

【讨论】：

【解决方案4】：

如果单行工具提示可以满足您的需求，您也可以将
white-space: pre 添加到.tool-content。

【讨论】：

【解决方案5】：

您可以添加一个max-width 并在您的CSS 上的元素或其内部div 中输入word-break: break-all 或word-wrap: break-word。

【讨论】：