Как в bootstrap сделать popover окна по hover и появление в зависимости от положения кнопки?

Question

[Stacy None]

Попустим у меня есть div с ограниченной высотой и шириной в котором есть текст
Как мне сделать так чтобы popover появлялись с лева или с права в зависимости от того как близко находится кнопка вызывающая это окно к краю?
Вот как на скриншоте:

Comments

[Сергей delphinpro]

Документацию, понятно, не читали...

getbootstrap.com/javascript/#popovers

How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. manual cannot be combined with any other trigger.

How to position the popover - top | bottom | left | right | auto.
When "auto" is specified, it will dynamically reorient the popover. For example, if placement is "auto left", the popover will display to the left when possible, otherwise it will display right.

When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The this context is set to the popover instance.

Answer 1

[Kovalsky]

Если в метод popover передать параметр placement со значением right, то всплывашка появится справа.
Если передать left, то всплывашка появится слева.

А если передать функцию, то положение всплывашки будет зависеть от того, что вернёт функция, как в этом примере (upd - 'auto');

UPD: а если передать auto, то всей этой фигнёй заниматься не придется.

Comments

[Stacy None]

Окай, а как содержимое popover вывести в html ?

[Kovalsky]

Stasy11: это как и зачем?

[Stacy None]

Никита Полевой: Ну я хочу задать содержимому свои стили, фон картинкой, текст со стилями и тд
А не просто через data-content=""

[Kovalsky]

Stasy11: content

[Stacy None]

Никита Полевой: Я так и не понял как сделать такие окна, они все равно всплывают не так как мне нужно, за грани этого div вылазиют ;(

[Kovalsky]

Stasy11: ну это уж ваша забота что туда положить и как стилизовать. Берёте молоток (CSS) и делаете так чтоб он не вылезал)

Сделайте например position: 'auto left'