---
title: "Bootstrap Popover not working"  
description: "Bootstrap Popover not working"  
author: "Anonymous User"  
published: 2014-10-31  
updated: 2014-10-31  
canonical: https://www.mindstick.com/forum/2473/bootstrap-popover-not-working  
category: "bootstrap"  
tags: ["jquery", "javascript", "twitter bootstrap 3", "css"]  
reading_time: 2 minutes  

---

# Bootstrap Popover not working

I have a [problem](https://yourviews.mindstick.com/view/81399/tackling-the-problem-of-unemployment-during-corona-pandemic) with the [bootstrap](https://www.mindstick.com/articles/1555/image-viewer-using-bootstrap-carousel) Popover. It works sometime but other times it doesn't. I use it to generate a popover with a [users](https://www.mindstick.com/news/2244/issue-preventing-users-from-accessing-facebook-s-social-networking-platforms-has-been-resolved) information when a [visitor](https://www.mindstick.com/forum/2295/how-to-count-number-of-visitors-for-website) hovers over the users name. The [page](https://www.mindstick.com/articles/13031/why-to-make-a-wikipedia-page) is generated by [ajax](https://www.mindstick.com/articles/1541/check-availability-of-user-name-or-email-using-asp-dot-net-ajax-and-jquery) so at first I thought that it simply was an issue of [content](https://www.mindstick.com/articles/13019/get-the-best-content-marketing-pricing-packages-for-your-brand) being loaded after but the issue is that it works sometimes.\
**[javascript](https://www.mindstick.com/articles/874/how-to-create-watermark-text-for-textbox-by-using-javascript) [code](https://yourviews.mindstick.com/view/85458/alan-turing-the-mastermind-behind-cracking-the-enigma-code-during-world-war-ii) 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');    });
```

## Replies

### Reply by Elena Glibart

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.\


---

Original Source: https://www.mindstick.com/forum/2473/bootstrap-popover-not-working

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.