Выравнивание текста в всплывающей подсказке

Подсказка Bootstrap выравнивает текст по середине по умолчанию. Я хотел бы выровнять слева. Есть ли хороший способ сделать это в HTML, вместо того, чтобы изменять файл CSS?

Вот мой пример кода:

<p rel="tooltip" title="Text in tooltip I want to align">Hover over here</p>

<script type="text/javascript">
   $(document).ready(function () {
      $("p").tooltip();
   });
</script>

Я уже пробовал, но это не сработало:

<p rel="tooltip" data-html="true" title="<p align='left'>Text in tooltip</p>">Hover over here</p>

Ответы

Ответ 1

Вы пробовали это?

<style> 
 .tooltip.show p {
   text-align:left;
 }
</style>

Примечание:.show автоматически добавляется при начальной загрузке, как только появляется подсказка.

Хотя это официально задокументировано (источник), я не думаю, что вы должны включать HTML-код в атрибут заголовка всплывающей подсказки. Это я рекомендовал:

$("p").tooltip({
  html: true,
  title: '<p>Text in tooltip</p>'
});

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

 <p id="myparagraph"> Hover over here </p>
 $("#myparagraph")

Ответ 2

Это следующее хорошо работает в Bootstrap версии 2.2.2, 3.3.6 и 4:

.tooltip-inner {
    text-align: left;
}

Ответ 3

Измените следующее в bootstrap.css(или bootstrap.min.css), также работает для v3

.tooltip-inner{
...
text-align:center; //change to left
...
}

Ответ 4

когда вы хотите включить html во всплывающую подсказку, просто используя подсказку начальной загрузки (используя data-html)

вот код:

<span data-toggle="tooltip" data-html="true" title="<p style='text-align:left'>Hello again<br/> this is tooltop</p>">

дополнительное примечание, вы должны использовать style = 'text-align: left' вместо просто тега align = 'left'

Ответ 5

Добавить data-placement="left"

<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>

Шрифт: CSS Tooltip