Наконечник наконечника Bootstrap - настройка разной ширины для разных всплывающих подсказок

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

Когда я пытаюсь перезаписать css, как показано ниже, все советы по настройке становятся затронутыми. Есть ли способ предоставить ширину всплывающей подсказки в строке для элемента, на который применяется всплывающая подсказка

.tooltip-inner {
   max-width: 350px;
   width: 350px;
}

Я попытался добавить два отдельных внутренних стиля всплывающей подсказки в css как a.tooltip-inner и h1.tooltip-inner с разной шириной, но не вступил в силу

Ссылка JSFiddle http://jsfiddle.net/vinaybvk/qr1cbu92/

Есть ли другой способ достичь этого.

Спасибо.

Ответы

Ответ 1

(Этот ответ относится к BS 3.2) Единственный способ добиться этого - переопределить шаблон по умолчанию для всплывающей подсказки. Затем вы используете разные селекторы для больших и обычных всплывающих подсказок, например так:

DEMO

$('.tt_reg').tooltip();

$('.tt_large').tooltip({
    template: '<div class="tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner large"></div></div>'
});

Примечание. Я добавил класс large к элементу tooltip-inner. Затем вы можете использовать CSS для настройки этого размера;

.large.tooltip-inner {
    width: 350px;
}

Ответ 2

Дайте контейнеру div класс:

<div class="large-tooltip">
    <i class="icon ion-help-circled" rel="tooltip" title="Hint"></i>
</div>

.large-tooltip .tooltip-inner {
    width: 250px;
}

Чтобы дать разные ширины для подсказок, а не добавлять разные шаблоны, можно добавить разные классы css для элемента контейнера, и мы можем соответствующим образом изменить ширину каждого элемента.

Ответ 3

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

В следующем JSFiddle я изменил класс второго элемента на example2, и я добавил параметр для этого селектора в JS-коде.

HTML:

<div>
    <h1 rel="tooltip" title="This is Normal tooltip" class="example">Tooltip1 with normal width </h1>
    <a href="#" class="example2" rel="tooltip" title="Tool tip with large text Tool tip with large text  Tool tip with large text Tool tip with large text Tool tip with large text Tool tip with large text >Tooltip 2 with larger width</a>
</div>

JS:

$('.example').tooltip();
$('.example2').tooltip({animation:false});

http://jsfiddle.net/qr1cbu92/2/

Чтобы изменить размер всплывающей подсказки, обратитесь к: Как изменить ширину и высоту всплывающих подсказок Twitter Bootstrap?

Ответ 4

У меня была та же проблема, однако .tooltip-inner{width} для моей задачи не удалось выполнить работу правильно. Что касается других (то есть более коротких) всплывающих подсказок, то фиксированная ширина была слишком большой. Я ленился писать отдельные html-шаблоны/классы для zilions всплывающих подсказок, поэтому я просто заменил все пробелы между словами &nbsp; в каждой текстовой строке.