在 Bootstrap 工具提示中显示长文本

Question

我正在尝试在 twitter 引导工具提示中显示一些长文本。正如您在下图中看到的那样，事情并没有一帆风顺。有没有人可以轻松修复溢出引导工具提示的文本？

编辑（添加请求的代码）：

在我的控制器中：

<a href='" + Url.Action("Index", "PP", new {id = productRow.ProductGuid, area = ""}) + "' " + 
          ((blTruncated) ? "class='auto-tooltip' title='" + productRow.ProductName.Replace("'", "") : "") + "'>" + 
           productName + "</a>

在我看来：

$('.auto-tooltip').tooltip();

Answer 1

正如in the documentation 所暗示的，确保您的工具提示完全不换行的最简单方法是使用

.tooltip-inner {
    max-width: none;
    white-space: nowrap;
}

有了这个，您不必担心尺寸值或类似的事情。主要问题是，如果您有超长的文本行，它就会从屏幕上消失（正如您在 JSBin Example 中看到的那样）。

Answer 2

我不太确定您的代码，
这是一个带有长工具提示值的示例：

元素：

 <a href="#" rel="tooltip" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas bibendum ac felis id commodo. Etiam mauris purus, fringilla id tempus in, mollis vel orci. Duis ultricies at erat eget iaculis.">Hover here please</a>

Js：

$(document).ready(function () {
  $("a").tooltip({
    'selector': '',
    'placement': 'top',
    'container':'body'
  });
});

CSS：

/*Change the size here*/
div.tooltip-inner {
    max-width: 350px;
}

演示：on JsBin.com

---

显然你只能在 Bootstrap 4 中更改 .tooltip-inner，谢谢@Felix Dombek

.tooltip-inner { max-width: ... }

Answer 3

作为在样式表中设置.tooltip-inner 样式的替代方法，您可以通过修改工具提示的模板直接将样式添加到tooltip。

在大多数情况下这可能不是一个好主意，因为您会直接将样式应用于元素，但值得注意的是，这对于少数情况是可能的，因为这是唯一的选择，或者出于某种原因是最佳选择.

$(selector).tooltip({
  title: "Lorem ipsum ...",
  template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner" style="max-width: none;"></div></div>',
});

或者，作为一个属性：

<span
  data-toggle="tooltip"
  title="Lorem ipsum ..."
  data-template='<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner" style="max-width: none;"></div></div>'
  >Some abbreviation</span>

$(function(){
  $('[data-toggle="tooltip"]').tooltip();
});

template 选项：

创建工具提示时使用的基本 HTML。

工具提示的title 将被注入.tooltip-inner。

.tooltip-arrow 将成为工具提示的箭头。

最外层的包装元素应该有.tooltip 类。

默认为：

'<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

作为替代方案，您可以将自己的类添加到模板并设置自定义类的样式。

$(selector).tooltip({
  title: "Lorem ipsum ...",
  template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner my-custom-tooltip"></div></div>',
});

.my-custom-tooltip {
  max-width: none;
}

Answer 4

您可以使用此来源获得更好的结果：

.tooltip-inner {
 word-break: break-all;
}