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

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

qTip and dynamically added elements issue

I have page with UpdatePanel where I add some forms on click on the page.
In those new added elements I have images that must use qTip.
I have this:
$(document).ready(function () {
$('.ttip').qtip({
content: $(this).attr('tooltip'),
show: 'click',
hide: 'click',
position: {
my: 'top right',
at: 'bottom center'
},
style: { classes: 'ui-tooltip-light' }
});
});
And this works with elements that are visibile in the begining.
All elements that use qTip have runat="server" attribute.
BUT when I add new element with class ttip it doesn't work.
Exloring I see that the elements that are visible in the beggining have attribute:
data-hasqtip="6"
But dynamically added elements doesn't have this attribute.
How can I workaround this?
How to make this somehow live?
UPDATE BASED ON ANSWER
I have added this in code behind where I make element visible:
// Button click handler that add new element to page
public void AddNewElement(Image image)
{
image.Visible = true;
image.ToolTip = "blah";
ScriptManager.RegisterStartupScript(this.Page, this.GetType(),
"tmp",
#"<script type='text/javascript'>
$('.ttip').filter(function(){return !$(this).data('qtip')}).qtip(
content: $(this).attr('tooltip'),
show: 'click',
hide: 'click',
position: {
my: 'top right',
at: 'bottom center'
},
style: { classes: 'ui-tooltip-light' }
);
</script>",
false);
}
But it still doesn't work :(

Once you have added new elements, reinitialize qTip plugin:
$('.ttip').filter(function(){return !$(this).data('qtip')}).qtip(...);