We Keep Coding

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");
});

Different Behaviors for Touch and Click

I'm using Bootstrap Popovers to supply "help text" in my UI.
My existing JavaScript:
// add "tooltips" via popover
$('[data-toggle="popover"]').popover({
container: 'body',
trigger: 'hover',
placement: 'auto bottom'
});
The Popover displays when I hover with a mouse or touch the element. My problem is with anchor tag elements. If the Popover is triggered by a touch event:
Don't follow the link
Add an anchor tag element to the Popover text to give access to the underlying link

I'd detect whether the user is on a touch device, then serve different content from data attributes. Use Popover methods to trigger your various actions.
<a href="#"
data-href="http://jsfiddle.net"
data-toggle="popover"
title="A popover title"
data-hover-content="No link here."
data-touch-content="<a href='http://jsfiddle.net'>
A link here</a>.">A popover link
</a>
var is_touch_device = 'ontouchstart' in document.documentElement;
$('[data-toggle="popover"]').popover({
container: 'body',
trigger: 'manual',
placement: 'auto bottom',
html: true,
content: function () {
if (is_touch_device) {
return $(this).attr('data-touch-content');
} else {
return $(this).attr('data-hover-content');
}
}
})
.on('mouseenter touch', function (e) {
$(this).popover('show');
})
.on('mouseleave', function () {
$(this).popover('hide');
})
.on('click', function () {
if (!is_touch_device) {
window.location.href = $(this).attr('data-href');
}
});
Fiddle demo
This can probably be simplified a bit. You could specify your content in the content function instead, of course.

this might help:
event.preventDefault()
"Description: If this method is called, the default action of the event will not be triggered... For example, clicked anchors will not take the browser to a new URL..."

How to hold bootstrap popover so that user can click on buttons in it

I have a div. On its hover i show a popover. I have made two buttons in popover.
Problem is when i take my mouse to press the button popover disappears. I making the divs dynamically. What i have tried is this:
$('.more').click(function() {
opinionBox += '<div onmouseenter="test($(this))" class="opinion">hello</div>';
$(this).append(opinionBox);
})
For popover:
function test(box) {
box.popover({title: 'Current Opinion',
trigger: 'hover',
html: 'true',
content: '<div><button>Press Me</button></div>',
placement: 'left'
}).popover('show');
}

You have used 'hover' event, So when your mouse is out of div popover will be removed. If 'click' will work for you then you can use trigger event as 'click'. This will not remove div after your mouse out.
box.popover({title: 'Current Opinion',
trigger: 'click', // Changed event from hover to click
html: 'true',
content: '<div><button>Press Me</button></div>',
placement: 'left'
}).popover('show');

I suggest you to put popover attribute 'delay'(in ms):
function test(box) {
box.popover({title: 'Current Opinion',
trigger: 'hover',
delay: { hide: 5000 }, // or greater time as you think
html: 'true',
content: '<div><button>Press Me</button></div>',
placement: 'left'
}).popover('show');
}

Changing cluetip content after page load

I want to change cluetip content after the page is loaded.
Let's say I have a button in my cluetip and after clicking it, I want it gone.
So here's the cluetip:
$('a.notice_tooltip').cluetip({activation: 'click', cluetipClass: 'jtip' ,
local:true , positionBy: 'bottomTop' , arrows: true, sticky: true , closePosition: 'title' });
HTML:
<a class="notice_tooltip" href="#" rel="#info_div" > open tooltip </a>
<div id="info_div">
<input class="btn' type="button" >
<input class="btn2' type="button" >
</div>
Here is the click event:
$('.btn').click(function(){
//do stuff
$(this).parent().append(some_message);
$(this).remove();
})
$('.btn2').click(function(){
//do stuff
$(this).parent().append(some_message);
$(this).remove();
})
This would remove the button and append a message to it's parent but when I reopen the cluetip, it's the old content again.
It's like, the plugin gets the DOM structure when the page is loading and after that, it doesn't care about the page changes.
I've tried to run the plugin again every time it gets closed.
$(function(){
$('.btn').click(function(){
//do stuff
$(this).remove();
})
$('a.notice_tooltip').cluetip({activation: 'click', cluetipClass: 'jtip' , local:true , positionBy: 'bottomTop' ,
arrows: true, sticky: true , closePosition: 'title' , onHide : function(ct,c) {
retooltip();
}
});
})
function retooltip(){
$('a.notice_tooltip').cluetip('destroy');
$('a.notice_tooltip').cluetip({activation: 'click', cluetipClass: 'jtip' , local:true ,
positionBy: 'bottomTop' , arrows: true, sticky: true , closePosition: 'title' , onHide : function(ct,c) {
retooltip();
}
});
}
It's still the same.

The problem
Each time Cluetip is closed, it throws its content away, and retrieves it from the original element next time it's opened. This means that if you want to make persistent modifications to the content of a Cluetip, you have to also make those modifications to the original element.
A possible solution
When your button is clicked, look up until you find the cluetip inner wrapper, and select its first child div. Use this to find the original div, and remove the button inside that. Then remove the clicked button.
$(function(){
$('a.notice_tooltip').cluetip({
activation: 'click',
cluetipClass: 'jtip',
local: true,
positionBy: 'bottomTop',
arrows: true,
sticky: true ,
closePosition: 'title'
});
$('.btn').click(function(){
// Find the original element
var originalId = $(this).closest('.cluetip-inner > div').attr('id');
// Remove it
$('#' + originalId).find('.' + $(this).attr('class')).remove();
// Remove the clicked button
$(this).remove();
});
});​
Working example.