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

我试图在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

我不太清楚你的代码，
这里有一个很长的工具提示值的例子：

元件：

  <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; } 

演示： 在JsBin.com上

Answer 2

正如在文档中暗示的那样，确保工具提示完全不打包的最简单的方法就是使用

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

有了这个，你不必担心尺寸值或类似的东西。 主要的问题是，如果你有一个超长的文本行，它会离开屏幕（你可以在JSBin例子中看到）。

Answer 3

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

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

Answer 4

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

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

 $(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创build工具提示时使用。

工具提示的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; }