I want the popover to hide after a while. I coded this -> CODE work..
JS
$('#qoo').popover({
placement : 'left',
html : true,
delay: {
show: 500,
hide: 100
},
content: function() {
return $('#content-wrapper1').html();
}
});
HTML
<div class="span1 offset1">
<a href="#" id="qoo" rel="popover" data-original-title="TITLEEEE" class="circle"> textttt</a>
<div id="content-wrapper1" class="content-wrapper"> texttttttat</div>
</div>
But it doesn't work.
To create a popover, add the data-toggle="popover" attribute to an element. Note: Popovers must be initialized with jQuery: select the specified element and call the popover() method.
Many of our components require the use of JavaScript to function. Specifically, they require our own JavaScript plugins and Popper.
A Bootstrap Popover is an attribute in bootstrap that can be used to make any website look more dynamic. Popovers are generally used to display additional information about any element and are displayed with a click of a mouse pointer over that element.
Delay show / hide does not automatically show / hide the popover, it defines the delays before doing so! Also, delay does not apply to manual trigger type, so you must have a trigger, like hover
. to get the delays to work.
$('#qoo').popover({
placement : 'right',
html : true,
trigger : 'hover', //<--- you need a trigger other than manual
delay: {
show: "500",
hide: "100"
},
content: function() {
return $('#content-wrapper1').html();
}
});
However, to achieve automatically hide for the popover, you can do the following by hooking into the shown.bs.popover
event :
$('#qoo').on('shown.bs.popover', function() {
setTimeout(function() {
$('#qoo').popover('hide');
}, 1000);
});
The above hides the popover after 1000 ms, 1 second.
My solution: Popover opens only when the user hover over the link for a certain amount of time.
$('.popMonster').popover({
html: true,
trigger: 'manual',
delay: {
show: 100,
hide: 0
},
container: $(this).attr('id'),
placement: 'auto',
content: function () {
$return = '<div class="hover-hovercard"></div>';
}
}).on("mouseenter", function () {
var delay_ = (function(){
var timer_ = 0;
return function(callback, ms){
clearTimeout (timer_);
timer_ = setTimeout(callback, ms);
};
})();
var self = $(this), url = '/myurl/action';
delay(function(){
// Get content via ajax:
$.get(url, function(data) {
if(data == 'Unauthorized.'){
location.href = './';
}else{
self.attr('data-content', data);
self.popover("show");
}
});
}, 800 ); // time to wait before call ajax
self.siblings(".popover").on("mouseleave", function () {
self.popover('hide');
});
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With