Menu
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> 
973
The solution is to use HTML '<table>' format for tooltip with 'text-align: center'.
How to position the tooltip - auto | top | bottom | left | right. When auto is specified, it will dynamically reorient the tooltip. When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second.
Here is how to do it with position: absolute and relative . On the container, set position: relative , and display: table (shrink to fit). For the position: absolute tooltip, set top: 0 , and left: 100% (moves to the right edge of the relative container).
This following works well in Bootstrap version 2.2.2, 3.3.6 and 4:
.tooltip-inner { text-align: left; } 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") If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
