Aligning text in bootstrap tooltip

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

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

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

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'

Related