Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

twitter bootstrap tooltip is misplaced

Please take a look at this jsfiddle

I gave position absolute to a question-sign icon with top:0; right: -42px; therefore the element that shows tooltip is outside of row. I think this has caused tooltip to not get proper width or misplace the tooltip content and tooltip content trapped within row-fluid. as you can see arrow position is fine.

update: I'd place ? icon next to textarea and textarea fill its parent width and aligned right. here is another example

like image 609
mhesabi Avatar asked Jun 25 '13 05:06

mhesabi


People also ask

How do I change the tooltip position in bootstrap?

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.

What are the four options for how a tooltip is triggered?

How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. 'manual' indicates that the tooltip will be triggered programmatically via the .

How to use tooltip in bootstrap?

How To Create a Tooltip. To create a tooltip, add the data-toggle="tooltip" attribute to an element. Note: Tooltips must be initialized with jQuery: select the specified element and call the tooltip() method.

How to use bootstrap 5 tooltip?

To create a tooltip, add the data-bs-toggle="tooltip" attribute to an element. Note: Tooltips must be initialized with JavaScript to work.


1 Answers

Specify body as a container for a tooltip (demo):

$('[data-toggle="tooltip"]').tooltip({
    container: 'body'
});
like image 168
Pavlo Avatar answered Sep 21 '22 23:09

Pavlo