Include template with data context in bootstrap popover

help
1

I am using popover to show user info on hovering username in my app. I have a meteor template with user info that needs to be shown. How can I include this template takes user object as parameter into popover content?

$(’.post-author’).popover({content: Template.userCard});

apparently the above line shows [object Object] as content in popover

And the template userCard needs an object as data context.

2

What information of the user you want to show in the pop-over?

3

basic profile information which I have published selectively…

avatar, full name, a title, and reactive links to follow or unfollow

4

Have a look at Blaze.renderWithData(). You will probably end up doing something like this:

var content = Blaze.renderWithData(Template.userCard, ...);
$('.post-author').popover({content: content});
5

@Steve Tried this before and rechecked now after you mentioned, but its not working and it shows a warning

Warning: Blaze.render without a parent element is deprecated. You must specify where to insert the rendered content
6

May be I can forget bootstrap popover and implement my own?

With jquery I can do it, but with meteor templates I am not getting any leads. Can someone help me with this?

7

How you set parenNode for Blaze.renderWithData ?

Blaze.renderWithData(templateOrView, data, parentNode, [nextNode], [parentView])

May be parent node not defined yet ?

8

@miniwe you are right, I haven’t set parentNode. but what could be parentNode for my template?

I have a template postItem in which I am rendering popover template userCard

9

Try to Use Blaze.toHTML(templateOrView) - Renders a template or View to a string of HTML.

10

but Blaze.toHTML() wont render my object data? and it is not reactive too…

I am trying Blaze.toHTMLWithData()

11

Blaze.toHTMLWithData() showing HTML content without rendering it

13

I am using Bootstrap popover no problem

14

@jamgold how can i use Blaze.renderWithData() for content in popover? As a parentNode option I tried useing $(’.popover’)[0] but it is not working. so I have created my own parentNode as popover.

15

Hi,

I alwasy thought about wrapping the following solution in a package, but it’s easy enough to implement it by hand.
I use [bootbox.js][1] but you can maybe adjust this for the popover thingy you use.

bootbox.dialog({
    title: "Some Title",
    message: " ", <-- it's important that the message isn't really empty.
    buttons: {
        cancel: {
            label: "Cancel",
            className: "btn-default",
        },

        ok: actionBtn, <-- since it has some logic, I define it in advance, but this has nothing to do with your question.
    }
});

Blaze.renderWithData(Template.bootboxSomeTemplate, function() { return SomeCollection.findOne(dataAttributes._id) }, $('.bootbox-body')[0]);

This code basically creates and shows an empty bootbox dialog and injects the rendered template into the body of the dialog.

If you only show one dialog at a time, you can work with $('.bootbox-body')[0]) without a problem. Another way would be to put a <div> with an unique id in the message and then inject the template into this <div>.

If you don’t wrap the SomeCollection.findOne-part into a function, the data will not be reactive.

I hope this helps. Have fun!
[1]: http://bootboxjs.com

16

Sorry, confused popover with tooltip. Also am not using Blaze.renderWithData

17

@HelloLudger thank you for your suggestion. bootbox shows a dialog box hiding the complete page like jquery lightbox. what wanted was something like bootstrap popover (like fb, on hover a username it shows user basic info).

I gaveup bootstrap popover and implemented my own with simple “div” to show or hide and position it where ever i need. it works like a charm. because im using Blaze.renderWithData() it is reactive too :smile:

18

How can i close this topic?

or keep it open to the solution for bootstrap popover?

19

You need to use the popover selector option for the parentNode and then listen for the shown.bs.popover event… and Blaze.renderWithData(...). I do the same thing for dynamic modals.

20

@jamesgibson thank you for your solution. but i have made a custom popover div with css arrow and used jquery and Blaze.renderWithData(). May be next time I will try your solution :smile:

21

Can you extend on this? I’m having problems too. If I left the fade class the template is not rendered. When I remove the fade class I got the popover rendered but then I cannot hide it using .popover('hide')