Задержка Popover при загрузке не работает
Я хочу, чтобы popover спрятался через некоторое время. Я закодировал это → CODE...
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>
Но это не сработает.
Ответы
Ответ 1
Задержка show/hide автоматически не отображает/скрывает popover, она определяет задержки до, делая это! Кроме того, не относится к ручному типу запуска, поэтому у вас должен быть триггер, например hover
. чтобы заставить задержки работать.
$('#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();
}
});
Однако для автоматического сглаживания для popover вы можете сделать следующее, подключившись к событию shown.bs.popover
:
$('#qoo').on('shown.bs.popover', function() {
setTimeout(function() {
$('#qoo').popover('hide');
}, 1000);
});
Вышеуказанное скрывает popover через 1000 мс, 1 секунду.
Ответ 2
Мое решение: Popover открывается только тогда, когда пользователь навешивает ссылку на определенное количество времени.
$('.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');
});
})
Ответ 3
Я пробовал ваш код, проблема в вашем коде заключается в том, что всплывающая подсказка не кажется связанной в теле, она фактически выходит за пределы тела, поэтому, если вы оставите поле для элемента, вы сможете заставить его работать правильно. Взгляните на это:
JSFiddle
HTML:
<div class="span1 offset1" style="margin:100px">
<a href="#" id="qoo" rel="popover" data-original-title="TITLEEEE" class="circle"> textttt</a>
<div id="content-wrapper1" class="content-wrapper"> texttttttat</div>
</div>
JS:
$('#qoo').popover({
placement : 'right',
html : true,
delay: {
show: 500,
hide: 500
},
content: function() {
return $('#content-wrapper1').html();
}
});