부트 스트랩에서 팝 오버 지연이 작동하지 않습니다.

Question

잠시 후 팝업이 숨기를 원합니다. I이 부호화 - JS

$('#qoo').popover({ 
    placement : 'left', 
    html : true, 
    delay: { 
      show: 500, 
      hide: 100 
    }, 
    content: function() { 
    return $('#content-wrapper1').html(); 
}     

> CODE 일 ..

을

});

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> 

그러나 그것은 작동하지 않습니다.

Answer 1

지연 표시/숨기기 자동 /가 팝 오버를 숨길 표시되지 않습니다, 그것은 지연을 정의 전에하기 때문에! 또한 delay does not apply to manual trigger type이므로 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(); 
    } 
}); 

그러나, 자동으로 달성 팝 오버에 대한 숨길 수, 당신은 shown.bs.popover 이벤트에 접선하여 다음을 수행 할 수 있습니다

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

을 위 1000 MS, 일초 후 팝 오버를 숨 깁니다.

Answer 2

코드에서 문제가 발생했습니다. 코드에서 문제는 툴팁이 본문 내에 바인딩되어 있지 않은 것입니다. 실제로 몸 밖으로 나오기 때문에 요소의 여백을 남겨두면됩니다. 올바르게 작동하도록하십시오. 이것 좀보세요 :

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

내 솔루션 : 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'); 
    }); 

}) 

이