Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use any selector for popover container #1884

Open
tamtakoe opened this issue Oct 4, 2017 · 13 comments · May be fixed by #4551
Open

Use any selector for popover container #1884

tamtakoe opened this issue Oct 4, 2017 · 13 comments · May be fixed by #4551
Labels
component: popover needs: info type: feature

Comments

@tamtakoe
Copy link

tamtakoe commented Oct 4, 2017

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
@pkozlowski-opensource
Copy link
Member

It will be good to give possibility append it in any element

Any real-life use-cases? It was raised before in #1810 but we haven't heard back with any practical use-cases...

@tamtakoe
Copy link
Author

tamtakoe commented Oct 4, 2017 •
edited

@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

@govardhan-srinivas
Copy link

govardhan-srinivas commented Feb 16, 2018 •
edited

I'm having a similar issue here, which you can consider for re-opening the issue, I have an SVG image and i want to show popover on path of SVG with popover template, In this case i found no option to dynamically bind popover to svg. Any help is much appreciated.

I have tried using angular renderer2 to setAttribute dynamically, as I get SVG from a service but couldn't help it out. Try referring the plnkr https://plnkr.co/edit/2hhgwUFwtXhj8aMDjbHs?p=preview[](url)

@cwhaught
Copy link

cwhaught commented Apr 5, 2018

I have another scenario which would benefit from this feature.

We have an AngularJS app running in the same window as an Angular app with the css for Angular "namespaced" via DOM node. Because of this, the styles from bootstrap 3 are getting applied to anything appended to body instead of styles namespaced within our root Angular node.

@adamk33n3r
Copy link

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.

@sebius8780
Copy link

Hello, I think there is enough use case here to, at least, put it on the road - map ?

Thank you for the (really ) hard work !

@karljv
Copy link

karljv commented Mar 2, 2019 •
edited

Sometimes it is really hard to place these containers inside other angular components, especially external modules. Aka. Ngx-datatable, I have a really complex component made out of it and I need tooltips on either rows or columns. Due to the size of the component, manually adding and maintaining fixed popover elements makes little sense since I would have to place them in 100 places. I just want to position it next to row X and that's about it.

Please add the possibility to do it.

@maxokorokov maxokorokov mentioned this issue Mar 4, 2019
Closed
@KingDarBoja
Copy link

Hi guys,
Maybe this isn't the best solution but might be worthy testing it, just set the container config key to null and you will see the tooltip being appended to its parent container instead of the body element.

I based my solution by looking at the dropdown source code and noticed a similar approach already implemented.

My proof:
popover appended to parent

@gauraoGit
Copy link

I am trying to use popover in grid where popover will be used for showing the more information about the current row. But its very hard time to find to use popover with dynamic container and dynamic content.

@Kepro
Copy link

Kepro commented Jul 24, 2019

2019... not fixed... just use popper.js you can have all these issues already fixed...

@LaurenceMommers
Copy link

I've got another use case with the requestFullscreen API. If you have to use container body (in my case to make the popup extend over the parents boundingbox) the popup will break when you entered fullscreen mode because it's appended to the body which is now below the fullscreen element.

@Kepro
Copy link

Kepro commented Mar 22, 2021

2021... not fixed :D

@steve3d steve3d linked a pull request Aug 9, 2023 that will close this issue
Open
5 tasks
@JustinHillFeedo
Copy link

Please add this...I have about 4 use cases in my app since we're dual booting with AngularJS

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
component: popover needs: info type: feature
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(tooltip/popover/dropdown): add custom container support steve3d/ng-bootstrap