Bootstrap - Programmatically attach and show popover to an element

Question

I'm using Bootstrap v3 and I'm trying to show a popover programmatically, next to an element, when the page loads. There is no popover markup in the DOM. I want to create and show it in JQuery.

I've tried this but it doesn't work.

$( document ).ready(function() {
   $('.theElement').popover({
            placement:'right',
            trigger:'manual',
            html:true,
            content:'popover content'
        });
   $('.theElement').popover('show')
});

I get a "TypeError: Argument 1 of Window.getComputedStyle is not an object" error in console. I'm assuming this is caused by the above.

That should work fine. http://bootply.com/xqcvgLv7aU Check that jQuery and Bootstrap are referenced properly in your page. — Carol Skelly, Feb 06 '15 at 10:36
its working fine in this [fiddle](http://jsfiddle.net/Cerlin/gwjfe327/) — Cerlin, Feb 06 '15 at 10:39
I've found the problem. The element I was attaching to was also programmatically generated, so I had to make sure the popover was called after the element was added to the DOM. Thanks guys :) — iltdev, Feb 06 '15 at 10:45
Just stumbled upon this. Quick tip, there's no need to select the element twice, just chain `.popover('show')` to your previous `popover()` call. — Christof, Aug 04 '15 at 08:40

score 5 · Answer 1 · answered Apr 27 '16 at 01:56

5

Try this

$( document ).ready(function() {
   $('.theElement').attr('data-placement','right')
   //add all atributes.....

   //and finally show the popover
   $('.theElement').popover('show')
});

answered Apr 27 '16 at 01:56

Dey

842
9
21

score 1 · Answer 2 · answered Feb 28 '18 at 06:02

    $("[wf-popover]").popover({
        html : true,
        content: function() {
          var content = $(this).attr("wf-content");
          return content;
        },
        title: function() {
          var title = $(this).attr("wf-title");
          //return $(title).children(".popover-heading").html();
          return title;
        },
        placement: function() {
            var my = this.$element.attr('wf-popover')
            return my;
        },
        trigger: 'hover'
    });

element

<img src="profile.jpg" wf-popover="left" wf-content="<img src='profile_big.jpg' width=500 height=500 />" data-original-title="" title="">

score 1 · Answer 3 · answered Mar 23 '22 at 19:50

1

Try, calling this after the popover is shown

$('.popover').click(function() { $(this).hide(); });

Is the easiest approach.

answered Mar 23 '22 at 19:50

Efrain Ernesto Pinto Cobos

31
2

Bootstrap - Programmatically attach and show popover to an element

3 Answers3