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

Displaying long text in Bootstrap tooltip

提问by Jeff Borden

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 引导工具提示中显示一些长文本。正如您在下图中所看到的，事情并没有那么糟糕。有没有人对溢出引导程序工具提示的文本有一个简单的修复？

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();

回答by funerr

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 上

---

---

Apprently you can only change the .tooltip-innerin Bootstrap 4, thanks @Felix Dombek

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

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

回答by cmcculloh

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 示例中所见）。

回答by dr. Neox

You could use this source for better results:

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

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

回答by Nate

As an alternative to styling the .tooltip-innerin a stylesheet you can add styles directly to the tooltipby 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();
});

templateoption:

template选项：

Base HTML to use when creating the tooltip.

The tooltip's titlewill be injected into the .tooltip-inner.

.tooltip-arrowwill become the tooltip's arrow.

The outermost wrapper element should have the .tooltipclass.

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

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

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

最外面的包装元素应该有.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;
}