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>

Lutetium

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

Kerplunk

align="left" isn't valid @ruut. – Nichrome

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. – Cucurbit

HTML directly in the tooltip title attribute is officially documented: getbootstrap.com/docs/4.0/components/tooltips – Advertence

For Bootstrap 5 one can use text-start (instead of text-left class of Bootstrap 4), e.g. <p class="text-start">Text in tooltip</p> – Temuco

This works, but the left-alignment disappears during fade out of the tooltip (at least in bootstrap 4), which does not look great. Adding .tooltip.fade p {text-align:left;} fixes this. – Robbyrobbyn

Answer 2

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

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

Subscription

I had to either use !important or .tooltip > .tooltip-inner to get this to work, I'm using Bootstrap 3.3.5 – Steenbok

this works well for me, with Bootstrap 4, no !important needed – Exercise

Working in Bootstrap 5 as of 2022-10-07. – Psychomotor

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'

Balladmonger

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('<style> .tooltip-inner { text-align: left;} </style>');}); This worked for me. – Florindaflorine

Almost right. just add a class like <span data-toggle="tooltip" data-html="true" title="<p class='text-left'>Hello again<br/> this is tooltop</p>"> and then style it in css (for bootstrap this will align the text left by default) – Establishment

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

Establishment

This one is great as you can deploy it on a per-instance basis (as opposed to applying it globally via a CSS declaration). – Santana

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

Reinhart

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. – Artemisia

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! – Florindaflorine

Answer 6

Bootstrap 5.2:

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

Elfrieda

Answer 7

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

Bossism

Answer 8

It worked fine for me:

For alignment of the content of the tooltip.

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

For the position of the tooltip: 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

Inheritor

This doesn't align left but put the tooltip on the left. – Chladek

The question is asking for alignment of the content of the tooltip. This is for the position of the tooltip itself. – Psychomotor