Aligning text in bootstrap tooltip

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>

Answers


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

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

.tooltip-inner{
...
text-align:center; //change to 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'


Need Your Help

What is the best way to check the strength of a password?

algorithm security passwords

What is the best way of ensuring that a user supplied password is a strong password in a registration or change password form?

What does "for" attribute do in HTML <label> tag?

html forms input label

I wonder what is the difference between the following two code snippets: