Отображение длинного текста в всплывающей подсказке Bootstrap

Я пытаюсь отобразить немного длинного текста в подсказке twitter bootstrap. Как вы можете видеть на картинке ниже, все идет не круче. Кто-нибудь может легко исправить текст, который переполняет всплывающую подсказку?

tooltip overflow

EDIT (добавленный запрошенный код):

В моем контроллере:

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

На мой взгляд:

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

Ответы

Ответ 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

Очевидно, вы можете изменить только .tooltip-inner в Bootstrap 4, спасибо @Felix Dombek

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

Ответ 2

Как указано в в документации, самый простой способ убедиться, что всплывающая подсказка вообще не переносится, - это использовать

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

При этом вам не нужно беспокоиться о значениях измерений или о чем-либо подобном. Основная проблема в том, что если у вас есть очень длинная строка текста, она просто исчезнет с экрана (как вы можете видеть в примере JSBin).

Ответ 3

Вы можете использовать этот источник для лучших результатов:

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

enter image description here

Ответ 4

В качестве альтернативы стилизации .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;
}