41

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>
agerrr
  • 1,133
  • 5
  • 13
  • 23

6 Answers6

89

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

.tooltip-inner {
    text-align: left;
}
Tobias
  • 1,863
  • 1
  • 17
  • 17
22

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")
Gabe Hiemstra
  • 266
  • 1
  • 14
siemanko
  • 1,309
  • 1
  • 11
  • 25
  • 2
    align="left" isn't valid @ruut. – Don P May 05 '14 at 17:17
  • To clarify Donny's comment, using `align="left"` in an HTML tag is not valid HTML5. The HTML5 method is the CSS described in this answer. – drewsberry Jan 06 '17 at 14:37
  • 1
    HTML directly in the tooltip title attribute is officially documented: https://getbootstrap.com/docs/4.0/components/tooltips/ – Gabe Hiemstra May 09 '19 at 11:02
  • For Bootstrap 5 one can use `text-start` (instead of `text-left` class of Bootstrap 4), e.g. `

    Text in tooltip

    `     – Icarus Apr 08 '21 at 13:12
8

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'

Arief Setiabudi
  • 83
  • 1
  • 3
  • Have you tried this before posting? Doesn't work on bootstrap bundle 4.4.1 - you need to use css - see Tobias answer above. I didn't have access to the html so I injected the css: $(function () { $('head').append('');}); This worked for me. – Mark B Apr 02 '20 at 12:54
  • 1
    Almost right. just add a class like `` and then style it in css (for bootstrap this will align the text left by default) – Altin May 21 '20 at 13:44
2

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

Altin
  • 1,805
  • 2
  • 22
  • 43
1

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

.tooltip-inner{
...
text-align:center; //change to left
...
}
karim sallami
  • 55
  • 1
  • 8
  • 5
    Never make changes directly to bootstrap.css, instead write your own css file and include this after the bootstrap inclusion instead. This will still allow you to overwrite default behavior, but allow you to upgrade bootstrap later without loosing your manual overwrites. – mtrolle Jun 15 '17 at 11:57
  • 1
    It's always a bad idea to hack files that come from a 3rd party. Just don't do it at all - this will definitely come back to bite you. There *will* be an update & you *will* have forgotten your hacks! – Mark B Apr 02 '20 at 12:39
-4

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

Leandro Amarilha
  • 1
  • 3