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

I'm trying to display a bit of long text in a twitter bootstrap tooltip. As you can see in the picture below, things aren't going smashingly. Does anyone have an easy fix for text that overflows the bootstrap tooltip?

我试图在twitter bootstrap工具提示中显示一些长文本。正如你在下面的图片中看到的那样，事情并没有那么严重。有没有人可以轻松修复溢出引导工具提示的文本？

EDIT (added requested code):

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

In my controller:

在我的控制器中：

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

In my view:

在我看来：

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

4 个解决方案

#1

I'm not quite sure about your code,
here is an example with a long tool-tip value:

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

Element:

元件：

 <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:

JS：

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

Css:

CSS：

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

Demo: on JsBin.com

演示：在JsBin.com上

#2

As hinted at in the documentation, the easiest way to ensure that your tooltip does not wrap at all is to use

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

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

With this, you don't have to worry about dimension values or anything like that. Main problem being if you have a super long line of text it will just go off of the screen (as you can see in the JSBin Example).

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

#3

You could use this source for better results:

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

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

#4

As an alternative to styling the .tooltip-inner in a stylesheet you can add styles directly to the tooltip by modifying the template of the tooltip.

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

This is probably not a good idea in most cases since you would be applying styles directly to the element, but it's worth noting that this is possible for those few cases where this is the only option or for some reason is the best option.

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

$(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>',
});

Or, as an attribute:

或者，作为属性：

<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 option:

模板选项：

Base HTML to use when creating the tooltip.

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

The tooltip's title will be injected into the .tooltip-inner.

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

.tooltip-arrow will become the tooltip's arrow.

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

The outermost wrapper element should have the .tooltip class.

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

Defaults to:

默认为：

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

As an alternative, you can add your own class to the template and style the custom class.

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

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