Bootstrap 4 工具提示文本格式答案

【问题标题】：Bootstrap 4 tooltip text formattingBootstrap 4 工具提示文本格式
【发布时间】：2020-03-25 11:14:04
【问题描述】：

我一直在努力使我网站上的工具提示看起来不错，最近在 Godaddy.com 上遇到了工具提示，我希望能够在以下位置复制文本格式：

目前我自己的工具提示如下所示：

这是我当前的代码，当悬停在图像上时出现工具提示非常重要（我知道看起来很乱，但请忽略）：

<img src="image URL here" width="20" data-toggle="tooltip" data-placement="top" title="A short description of your project/solution (max 250 characters), will only be displayed on the home screen, not in your post! If you do not wish to use this leave 'None'">

我主要想做的是能够在工具提示中创建新行。

任何建议都会非常感谢！

【问题讨论】：

正如你在第二张图片中所说的那样，它已经在创建新行了，不是吗？
stackoverflow.com/a/19001875/1675954
这能回答你的问题吗？ Add line break to tooltip in Bootstrap 3
@Rasmus Baj，我的回答对你有用吗？
@Manjuboyz 是的，非常，当我使用代码时，我可以在检查器中看到它，但页面本身除了放置元素的一些空白之外什么都没有出现。但是感谢您对我的帮助！

标签： html css bootstrap-4

【解决方案1】：

你可以这样做：

您可以通过在内容之间添加<br /> 来添加新行，这应该适合您。

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 220px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  text-align: justify;
  /* This is what you need */
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

   <div class="tooltip">Hover me
  <span class="tooltiptext">A short description of your project/solution (max 250 characters), will only be displayed on the home screen. <br /> <br /> Second para not in your post! If you do not wish to use this leave 'None</span>
</div>

【讨论】：

【解决方案2】：

通过添加修复

data-html="true"

这让我可以在标题文本中使用<br/>

最终代码sn-p：

<img src="image URL here" width="20" data-html="true" data-toggle="tooltip" data-placement="top" title="A short description of your project/solution (max 250 characters), will only be displayed on the home screen, not in your post! <br/> If you do not wish to use this leave 'None'">

【讨论】：