We Keep Coding

Show and hide a popover on click of div's

Here is my jsfiddle: My fiddle
After drag n drop of "rule/event" class into "layout" class, how to create a popover with HTML form on-click or double-click of the dropped components?
$('[rel="popover"]').popover({
alert("hi");
container: 'body',
html: true,
content: function () {
var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
return clone;
}
}).click(function(e) {
e.preventDefault();
});

Boostrap - Popover only being fired after second click

I addClass/removeClass a CSS class called SiteClass dynamically (see this question for background). I bind a bootstrap popover to these like so:
$(document).ready(function(){
$("#SiteList").on('click','a.SiteClass', function(e){
alert('clicked');
e.preventDefault();
e.stopPropagation();
var strcontent = $(this).html();
var strTitle = 'Title for ' + strcontent;
var strMessage = 'Foo <b>Bar</b> Baz';
$(this).popover({
html: true,
title: strTitle,
content: strMessage
});
});
});
The first time I click I get the alert box 'clicked', but no popover. Subsequent clicks and the popover works.
Any clue as to why this is happening and to get the popover to fire from click 1?

$().popover(options) simply initializes your popover. You can trigger the display of the popover with:
$(this).popover('show');
If you would like to toggle the popover on click instead, try:
$(this).popover('toggle');
I think the reason it works only after the first click in your case is that with the first click the popover is initialized with the default trigger 'click', so that subsequent clicks (but not the first click) will trigger it.

after a lot of tries finally I have found out this solution and working fine:
<script>
$(document).ready(function () {
$(document).on("click", '#add-new', function (e) {
e.preventDefault();
$('#add-new').popover({
placement: 'right',
html: true,
container: 'body',
trigger: 'manual',
content: function () {
return $('#popover_content_wrapper').html();
},
});
$(this).popover('toggle');
});
});
</script>

Bootstrap 3.1.1 Popover Delegated OK Function

I have a table and last column has a button generated Dynamically.
<button id="popover-row' + row + '" rel="popover">' + docAccessText + ' ' + fileAccessText + '</Button>;
I am creating a Dynamic Popover on click of the Above Button.
// initialize the Popover
var popOverSettings = {
placement: 'bottom',
container: 'body',
html: true,
selector: '[rel="popover"]',
content: $('#permissionPopover').html()
}
// bind the popover on body
$("body").popover(popOverSettings).parent().delegate('button.btn_permission_ok', 'click', function(event) {
// Do something on click of OK
$("[rel=popover]").popover("destroy");
$(".popover").remove();
}
}).on("show.bs.popover", function(e) {
// hide all other popovers before showing the current popover
$("[rel=popover]").not(e.target).popover("destroy");
$(".popover").remove();
}).on("shown.bs.popover", function(e) {
// Do something after showing the popover
});
// click on cancel button removes the popover
$("body").popover(popOverSettings).parent().delegate('div.btn_permission_cancel', 'click', function() {
$("[rel=popover]").popover("destroy");
$(".popover").remove();
});
Everything works as expected, but only the first time. When i open this view again, things start duplicating. Popover functions start executing twice. If I close the view again, now popover functions start executing thrice.
I believe that when I am destroying the PopOver on Click of Delegated OK, The events are still there. I tried the below line of code to undelegate the event, but it's not working.
$(event.target).parent().undelegate('button.btn_permission_ok', 'click');
Please suggest.

Not a complete answer, but if you would like one popover per button to be triggered on the button, try using some code like this.
var popOverSettings = {
trigger: 'manual',
placement: 'bottom',
container: 'body',
html: true,
content: $('#permissionPopover').html()
};
$(document).on("click", "button[rel='popover']", function(e) {
var $btn = $(this);
$btn.popover(popoverOptions);
$btn.popover("show");
});

Popover does not get anchored to the triggering element

So my Twitter Bootstrap popovers seem to be positionally challenged when the triggering element is contained within an element with the style -ms-overflow-y: auto; (a scrollable element within the window).
When the element is scrolled, the popover does not scroll with it.
I would really like the popover to move with the content within this scrollable element. How can I achieve this?
popover code:
$(this).popover({
animation: false,
html: true,
placement: popover.placement || 'auto bottom',
title: popover.title,
content: popover.validationMessage + popover.content,
trigger: 'manual',
container: '.content-panel'
}).click(function (e) {
$('BUTTON[data-toggle="popover"]').each(function (index, element) { $(this).popover('hide'); });
$(this).popover('show');
$('#' + $(this).attr('data-for')).focus();
});
.content-panel is the scrollable element.
fiddle me this, Batman
http://jsfiddle.net/VUZhL/171/
Update
I would like the popover to continue floating overtop the other elements. When using position:relative; on the parent element it contains the popover instead of letting it float over top.
Bad
Good

Parent element (offsetParent) of popover need to not be static, you could postionned it relatively to document:
position: relative;
See jsFiddle
EDIT: for your use case, you could bind onscroll event of container and use following snippet:
SEE jsFiddle
$(function () {
$('#example').popover();
$('div').on('scroll', function () {
var $container = $(this);
$(this).find('.popover').each(function () {
$(this).css({
top: - $container.scrollTop()
});
});
});
});

For BS 3 and above
you can use container: $(element)
Example:
let elem = $(this)
$(elem).popover({
selector: '[rel=popover]',
trigger: 'hover',
container: $(elem),
placement: 'bottom',
html: true,
content: 'Popover Content'
});

How to bind bootstrap popover on dynamic elements

I'm using Twitter Bootstrap's popover on the dynamic list. The list item has a button, when I click the button, it should show up popover. It works fine when I tested on non-dynamic.
this is my JavaScript for non-dynamic list
$("button[rel=popover]").popover({
placement : 'right',
container : 'body',
html : true,
//content:" <div style='color:red'>This is your div content</div>"
content: function() {
return $('#popover-content').html();
}
})
.click(function(e) {
e.preventDefault();
});
However, It doesn't work well on dynamic list. It can show up when I click the button "twice" and only show up one of list items I click fist time.
MY html:
<ul id="project-list" class="nav nav-list">
<li class='project-name'>
<a >project name 1
<button class="pop-function" rel="popover" ></button>
</a>
</li>
<li class='project-name'>
<a>project name 2
<button class="pop-function" rel="popover" ></button>
</a>
</li>
</ul>
<div id="popover-content" style="display:none">
<button class="pop-sync"></button>
<button class="pop-delete"></button>
</div>
My JavaScript for dynamic:
$(document).on("click", "#project-list li" , function(){
var username = $.cookie("username");
var projectName = $(this).text()
$("li.active").removeClass("active");
$(this).addClass("active");
console.log("username: " +username + " project name: "+projectName );
});
$(document).on("click", "button[rel=popover]", function(){
$(this).popover({
placement : 'right',
container : 'body',
html : true,
content: function() {
return $('#popover-content').html();
}
}).click(function(e){
e.preventDefault();
})
});
//for close other popover when one popover button click
$(document).on("click", "button[rel=popover]" , function(){
$("button[rel=popover]").not(this).popover('hide');
});
I have searched similar problems, but I still can't find the one to solve my problem. If anyone has some ideas, please let me know. Thanks your help.

Update
If your popover is going to have a selector that is consistent then you can make use of selector property of popover constructor.
var popOverSettings = {
placement: 'bottom',
container: 'body',
html: true,
selector: '[rel="popover"]', //Sepcify the selector here
content: function () {
return $('#popover-content').html();
}
}
$('body').popover(popOverSettings);
Demo
Other ways:
(Standard Way) Bind the popover again to the new items being inserted. Save the popoversettings in an external variable.
Use Mutation Event/Mutation Observer to identify if a particular element has been inserted on to the ul or an element.
Source
var popOverSettings = { //Save the setting for later use as well
placement: 'bottom',
container: 'body',
html: true,
//content:" <div style='color:red'>This is your div content</div>"
content: function () {
return $('#popover-content').html();
}
}
$('ul').on('DOMNodeInserted', function () { //listed for new items inserted onto ul
$(event.target).popover(popOverSettings);
});
$("button[rel=popover]").popover(popOverSettings);
$('.pop-Add').click(function () {
$('ul').append("<li class='project-name'> <a>project name 2 <button class='pop-function' rel='popover'></button> </a> </li>");
});
But it is not recommended to use DOMNodeInserted Mutation Event for performance issues as well as support. This has been deprecated as well. So your best bet would be to save the setting and bind after you update with new element.
Demo
Another recommended way is to use MutationObserver instead of MutationEvent according to MDN, but again support in some browsers are unknown and performance a concern.
MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
// create an observer instance
var observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
$(mutation.addedNodes).popover(popOverSettings);
});
});
// configuration of the observer:
var config = {
attributes: true,
childList: true,
characterData: true
};
// pass in the target node, as well as the observer options
observer.observe($('ul')[0], config);
Demo

Probably way too late but this is another option:
$('body').popover({
selector: '[rel=popover]',
trigger: 'hover',
html: true,
content: function () {
return $(this).parents('.row').first().find('.metaContainer').html();
}
});

I did this and it works for me.
"content" is placesContent object. not the html content!
var placesContent = $('#placescontent');
$('#places').popover({
trigger: "click",
placement: "bottom",
container: 'body',
html : true,
content : placesContent,
});
$('#places').on('shown.bs.popover', function(){
$('#addPlaceBtn').on('click', addPlace);
}
<div id="placescontent"><div id="addPlaceBtn">Add</div></div>

Try this HTML
Do Popover 1
Do Popover
<div id="popover-content-1" style="display: none">Content 1</div>
<div id="popover-content-2" style="display: none">Content 2</div>
jQuery:
$(function() {
$('[data-toggle="popover"]').each(function(i, obj) {
var popover_target = $(this).data('popover-target');
$(this).popover({
html: true,
trigger: 'focus',
placement: 'right',
content: function(obj) {
return $(popover_target).html();
}
});
});
});

This is how I made the code so it can handle dynamically created elements using popover feature. Using this code, you can trigger the popover to show by default.
HTML:
<div rel="this-should-be-the-target">
</div>
JQuery:
$(function() {
var targetElement = 'rel="this-should-be-the-target"';
initPopover(targetElement, "Test Popover Content");
// use this line if you want it to show by default
$(targetElement).popover('show');
function initPopover(target, popOverContent) {
$(target).each(function(i, obj) {
$(this).popover({
placement : 'auto',
trigger : 'hover',
"html": true,
content: popOverContent
});
});
}
});

Just to update that, a no-jquery answer for people using bootstrap 5 is
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl, {
content: get_content
})
})
The get_content function should use this (the popover element) to generate dynamic content.