Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Use any selector for popover container

See original GitHub issue

Now we append popover in the element or body. It will be good to give possibility append it in any element

<button type="button" ngbPopover="text..." container=".my-block">
    Popover appended to element with class .my-block
</button>

Furthermore it removes hardcode

if (this.container === 'body') { //can change to `if (this.container) {...}`
   window.document.querySelector(this.container).appendChild(this._windowRef.location.nativeElement);
}

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 4.4.4

ng-bootstrap: 1.0.0-beta.5

Bootstrap: 4.0.0-beta

Issue Analytics

State:
Created 6 years ago
Reactions:13
Comments:12 (1 by maintainers)

Top GitHub Comments

6reactions

adamk33n3rcommented, Jul 27, 2018

We have the same use scenario as @cwhaught. We currently run two versions of bootstrap while we are in the slow process of converting everything to newer tech. We have this issue for other components like dropdowns and tooltips as well. The container attribute seems to imply you can pick the container so we were shocked when it was hard coded to only accept body.

2reactions

tamtakoecommented, Oct 4, 2017

@pkozlowski-opensource I would never wrote about it if no real use-case 😃 See example, open popovers and try to scroll: https://plnkr.co/edit/b3411ErjSO3vAY0CBls7?p=preview

I want use popover in the grid, and it has to be clipped by grid-container, but not clipped by grid-cell

Top Results From Across the Web

Popovers - Bootstrap

Popovers that use delegation (which are created using the selector option) cannot be individually destroyed on descendant trigger elements.

bootstrap popover with container set for the "body" does not ...

You have to use the selector attribute to destroy/hide the popover: http://jsfiddle.net/fScua/363/ $('.button').click(function(){ ...

Popovers · Bootstrap

$(function () { $('[data-toggle="popover"]').popover() }). Example: Using the container option. When you have some styles on a parent element that interfere ...

Bootstrap JS Popover Reference - W3Schools

Name Type Default Try it animation boolean true Try it container string, or the boolean false false Try it content string "" Try it

Bootstrap popovers - CoreUI

Popovers can be triggered thanks to an element inside a shadow DOM. By default, this component uses the built-in content sanitizer, which strips...