Отображение длинного текста в подсказке 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();

jquery css twitter-bootstrap twitter-bootstrap-tooltip
person Jeff Borden    schedule 29.08.2013    source источник
comment
Не могли бы вы показать код, который вы используете?   -  person rink.attendant.6    schedule 29.08.2013
comment
Добавлен код @rink.attendant.6   -  person Jeff Borden    schedule 29.08.2013

Ответы (4)


arrow_upward
98
arrow_downward

Я не совсем уверен в вашем коде,
вот пример с длинным значением всплывающей подсказки:

Элемент:

 <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: ... }
person funerr    schedule 29.08.2013
comment
@funerr: Почему бы не использовать div.tooltip-inner { max-width: none; }? Тогда он больше никогда не ограничен?! - person algorhythm; 27.05.2015
comment
@algorhythm, потому что вы, вероятно, хотите, чтобы текст всплывающей подсказки в какой-то момент переносился. - person bernk; 12.09.2015
comment
что делать, если текст заголовка слишком длинный и без пробелов. Тогда и это условие не будет выполнено. - person Azam Alvi; 01.10.2015
comment
Просто установка .tooltip-inner { max-width: ... } работает в Bootstrap 4! - person Felix Dombek; 23.07.2017

arrow_upward
32
arrow_downward

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

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

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

person cmcculloh    schedule 28.07.2015
comment
Я удалил white-space:nowrap; и ввел всплывающую подсказку на 1000 символов. Это работало нормально в Firefox (но проблема всегда была с ограничением IE 512), поэтому, когда я пробовал это в IE, он зависал мой курсор и загружал мой процессор - всплывающая подсказка не появлялась. Сумасшедший! Все это из всплывающей подсказки. Жаль, что я не могу вставить ссылку на дополнительную информацию (которая может вывести дополнительную информацию) во всплывающую подсказку. - person MikeTeeVee; 20.07.2016

arrow_upward
7
arrow_downward

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

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

введите описание изображения здесь

person dr. Neox    schedule 02.06.2016
comment
word-wrap: break-word; может лучше - person jk2K; 12.03.2018

arrow_upward
4
arrow_downward

В качестве альтернативы стилизации .tooltip-inner в таблице стилей вы можете добавить стили непосредственно в подсказку, изменив шаблон всплывающей подсказки.

Вероятно, в большинстве случаев это не очень хорошая идея, поскольку вы будете применять стили непосредственно к элементу, но стоит отметить, что это возможно в тех немногих случаях, когда это единственный вариант или по какой-то причине лучший вариант.

$(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;
}
person Nate    schedule 01.08.2016
comment
Этот костюм лучше для меня. Потому что я не хочу воздействовать на всю мою систему, а только на конкретный случай. - person Coisox; 08.08.2020