Popover Verzögerung bei Bootstrap funktioniert nicht

Question

Ich möchte das Popover nach einer Weile zu verstecken. Ich codiert diese ->CODE Arbeit ..

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> 

Aber es funktioniert nicht.

Answer 1

Verzögerung Ein-/Ausblenden nicht automatisch anzeigen/ausblenden popover definiert es die Verzögerungen vor so! Auch , so müssen Sie einen Auslöser haben, wie . um die Verzögerungen zur Arbeit zu bekommen.

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

jedoch automatisch für die popover verstecken zu erreichen, können Sie folgendes tun durch shown.bs.popover Ereignis in das Einhaken:

$('#qoo').on('shown.bs.popover', function() { 
    setTimeout(function() { 
     $('#qoo').popover('hide'); 
    }, 1000); 
}); 

Die oben versteckt die popover nach 1000 ms, 1 Sekunde.

Answer 2

Ich habe Ihren Code versucht, das Problem in Ihrem Code ist, dass der Tooltip scheint nicht innerhalb des Körpers gebunden werden, es geht tatsächlich außerhalb des Körpers, also wenn Sie den Rand für das Element verlassen würden Sie in der Lage damit es richtig funktioniert. Werfen Sie einen Blick auf diese:

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

}); 

Answer 3

Meine Lösung: Popover wird nur geöffnet, wenn der Benutzer für eine bestimmte Zeit über den Link fährt.

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

})