Aligning text in bootstrap tooltip

Question

Bootstrap tooltip aligns text to the middle by default. I'd like to align to the left. Is there any nice way of doing this within HTML, instead of modifying CSS file?

Here is my sample code:

<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>

I've already tried but it didn't work:

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

Answer 1

Have you tried this one?

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

Note: .show is automatically added by bootstrap once the tooltip is visible.

Although officially documented (source), I do not think you should include HTML code in the tooltip title attribute. This I recommended:

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

Also referring to paragraph by p is a bad idea, as you could have many of them in your document. Refer by an id instead:

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

Answer 2

This following works well in Bootstrap version 2.2.2, 3.3.6 and 4:

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

Answer 3

when you want to include html in tooltip just using bootstrap tooltip (using data-html)

here the code :

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

additional note, you should use style='text-align:left' instead just tag align='left'

Answer 4

Just add a class:

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

for bootstrap this will align the text left by default

Answer 5

Change the following in your bootstrap.css (or bootstrap.min.css), works also for v3

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

Answer 6

I use Vue. The previous solutions didn't work for me. Not even using style inside the title. But I realized that if I put the style outside the scoped tag it works perfectly. It makes sense after all the tooltip is positioned just below the body being hierarchically above my component

Answer 7

Add 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>

Font: CSS Tooltip