Aligning text in bootstrap tooltip

html twitter-bootstrap tooltip text-alignment jquery-tooltip
agerrr picture agerrr · Jul 18, 2013 · Viewed 49.2k times · Source

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

Tobias picture Tobias · Oct 14, 2013

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

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

Related questions

How to use Bootstrap tooltip on input elements?

I'm not 100% sure this is at all possible, because input doesn't have a rel attribute (the example on the Bootstrap website shows only 1 example with rel="tooltip"), but I think it should work. This is my HTML: <input id="…

Read More
Bootstrap: Collapse and Tooltip together

I want to know if its possible to have tooltip on a collapse anchor tag. The code which is use for collapse is: <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Data</a> It works fine but …

Read More
vertical-align with Bootstrap 3

I'm using Twitter Bootstrap 3, and I have problems when I want to align vertically two div, for example — JSFiddle link: The grid system in Bootstrap uses float: left, not display:inline-block, so the property vertical-align doesn't work. I tried using …

Read More