forum

Home / DeveloperSection / Forums / Bootstrap Popover not working

Ask Question

Bootstrap Popover not working

Anonymous User330331-Oct-2014
I have a problem with the bootstrap Popover. It works sometime but other times it doesn't. I use it to generate a popover with a users information when a visitor hovers over the users name. The page is generated by ajax so at first I thought that it simply was an issue of content being loaded after but the issue is that it works sometimes.

javascript code here:

$(document).on('mouseenter', '.postusername', function (e) {
        var userid = this.parentElement.parentElement.children[0].innerHTML;
        var te = this;
        if (userid) {
            $.get('/Requests/getuinfo.php', { id: userid })
            .done(function (data) {
                var uinfo = JSON.parse(data);
                boo = uinfo;
                $(te).popover({
                    html: true,
                    template: '<div class="popover" role="tooltip"><div class="arrow"></div><div class="popover-content"></div></div>',
                    content: '<div class="popover-holder" style="background-image:url(\'/Style/Media/CoverPics/' + uinfo.coverpic + '\');">' + uinfo.name
                    + '</div>',
                    placement: 'auto'
                });
                $(te).popover('show');
            });
        }
    });
 
    $(document).on('mouseleave', '.postusername', function (e) {
        $(this).popover('hide');
    });

bootstrapjquery javascript twitter bootstrap 3 css 
Updated on 31-Oct-2014
Anonymous User

Anonymous User

Follow
I am a content writter !

Can you answer this question?

Answer

1 Answers

Elena Glibart

Elena Glibart

31-Oct-2014

As you've found, the problem was the fact that you were trying to create a new popover for something when it had already been done. Removing the popover after hiding it has fixed that problem.

However, this should fix the problem without removing it, and will mean you will also only get user information once per user.

var userids = [];
 
    $(document).on('mouseenter', '.postusername', function (e) {
        var userid = this.parentElement.parentElement.children[0].innerHTML;
        var te = this;
        if (userid) {
            if (userids.indexOf(userid) === -1) {
                $.get('/Requests/getuinfo.php', { id: userid })
                .done(function (data) {
                    var uinfo = JSON.parse(data);
                    boo = uinfo;
                    $(te).popover({
                        html: true,
                        template: '<div class="popover" role="tooltip"><div class="arrow"></div><div class="popover-content"></div></div>',
                        content: '<div class="popover-holder" style="background-image:url(\'/Style/Media/CoverPics/' + uinfo.coverpic + '\');">' + uinfo.name
                        + '</div>',
                        placement: 'auto'
                    });
                    $(te).popover('show');
                    userids.push(userid);
                });
            }
            else {
                $(te).popover('show');
            }
        }
    });
 
    $(document).on('mouseleave', '.postusername', function (e) {
        $(this).popover('hide');
    });

It keeps an array of the user ids that you've got info for, and only gets the info if you've not already done it.

Liked By