Feature request: pass a component to display in the Popover
See original GitHub issueIt would be really useful (at least to me) to be able to specify a Vue component to display inside the popover (when using the directive).
<span v-b-popover.hover="popoverConfig">{{ user.username }}</span>
...
data() {
return {
popoverConfig: {
props: {
user: this.user,
},
component: {
name: 'profile-component',
props: ['user'],
template: `
<b-card :title="user.username" :img-src="user.avatar" img-top>
<p class="card-text">{{ user.bio }}</p>
</b-card>
`
}
}
}
}
Inside the popover, this can be implemented with something like:
<component :is="b-popover.component" v-bind="b-popover.props"></component>
This feature would greatly enhance the popover component, making it able to display absolutely anything, encouraging modularization of code reuse.
Issue Analytics
- State:
- Created 6 years ago
- Comments:11 (7 by maintainers)
Top Results From Across the Web
Popovers - Bootstrap
Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.
Read more >Popover | Components - BootstrapVue
The Popover feature provides a tooltip-like behavior, can be easily applied to any interactive element via the component or v-b-popover directive.
Read more >Show one popover and hide other popovers - Stack Overflow
In my scripts I don't pass vars through the data attribute in the HTML, I prefer the logic in my js files. $(".vote").popover({...
Read more >Popover on hovering a Cell in the Gantt React Component
My goal would be that a popover appears on hover over one of the yellow marked elements, wich contains two links to other...
Read more >Popovers - Bootstrap - University of Houston
Popovers · Plugin dependency · Opt-in functionality · Popovers in button groups and input groups require special setting · Don't try to show...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I found a solution by using a function as value for
v-b-popover
. It does exactly as what I need: https://jsfiddle.net/7h4tpouz/3/.Thank you for your help. I think this feature request can be closed.
Note that while this method works for trigger a single
hover
(rrfocus
, but not both), it may not work forclick
properly.Your best (safest) bet would be to generate an HTML string with the appropriate HTML markup for a card, which has your content interpolated into the HTML string template, or use
document.elementCreate(...)
,Element.appendChild
, etc to generate a DOM structure to pass tov-b-popover