Search code examples
javascripthtmltwitter-bootstrappopover

How does Bootstrap know if an element has popover?

I understand when we add popover on an element in html but when we use javascript: 

 $("#element").popover({ // popover details });

there is no change on #element in html code. How can I refer to all elements with popover when there is no sign of it in html code?

Solution

  • The docs suggest that you add [data-toggle="popover"] to your elements with popovers and refer them through that attribute. However, if you don't do that and just manually initialize the popover, the plugin adds bs.popover data for you (through .data(), not .attr(), which is why you can't see them in the elements).

    $("#popover").popover({
  title: "Wow" 
});

console.log($("#popover").data("bs.popover")); //see the console

    http://www.bootply.com/vlpB0I0LcI

    As for how to refer to them is bit more complex, as you have to either keep up a list of elements with the popovers like @Tim suggested or just parsing the whole node tree with bs.popover data. Adding the attribute would be much simpler though.