Bootstrap의 Popover 로 웹 사이트를 구축 중이며 클릭 대신 팝 오버가 호버에 표시되는 방법을 알 수 없습니다.
내가하고 싶은 것은 누군가 링크를 클릭하는 대신 링크 위로 마우스를 가져 가면 팝 오버가 나타나고 이동하면 팝 오버가 사라지게하는 것입니다. 설명서에는 data 속성 또는 jquery를 사용할 수 있다고 나와 있습니다. 여러 팝 오버가 있기 때문에 jquery로 훨씬 더하고 싶습니다.
답변
설정 trigger
에 팝 오버의 옵션 hover
대신 click
은 IS, 기본 하나를.
data-*
마크 업의 속성 중 하나를 사용하여 수행 할 수 있습니다 .
<a id="popover" data-trigger="hover">Popover</a>
또는 초기화 옵션으로 :
$("#popover").popover({ trigger: "hover" });
여기 데모가 있습니다.
답변
접근성을 위해 포커스 트리거를 추가해야한다고 생각합니다.
즉 $("#popover").popover({ trigger: "hover focus" });
답변
팝 오버 자체를 가리 키려면 수동 트리거를 사용해야합니다.
이것이 내가 생각해 낸 것입니다.
function enableThumbPopover() {
var counter;
$('.thumbcontainer').popover({
trigger: 'manual',
animation: false,
html: true,
title: function () {
return $(this).parent().find('.thumbPopover > .title').html();
},
content: function () {
return $(this).parent().find('.thumbPopover > .body').html();
},
container: 'body',
placement: 'auto'
}).on("mouseenter",function () {
var _this = this; // thumbcontainer
console.log('thumbcontainer mouseenter')
// clear the counter
clearTimeout(counter);
// Close all other Popovers
$('.thumbcontainer').not(_this).popover('hide');
// start new timeout to show popover
counter = setTimeout(function(){
if($(_this).is(':hover'))
{
$(_this).popover("show");
}
$(".popover").on("mouseleave", function () {
$('.thumbcontainer').popover('hide');
});
}, 400);
}).on("mouseleave", function () {
var _this = this;
setTimeout(function () {
if (!$(".popover:hover").length) {
if(!$(_this).is(':hover')) // change $(this) to $(_this)
{
$(_this).popover('hide');
}
}
}, 200);
});
}
답변
설명한 기능은 Bootstrap 툴팁을 사용하여 쉽게 얻을 수 있습니다.
<button id="example1" data-toggle="tooltip">Tooltip on left</button>
그런 다음 요소에 대해 tooltip () 함수를 호출하십시오.
$('#example1').tooltip();
답변
이러한 답변 중 몇 가지를 시도하고 여러 링크로 확장이 잘 안되는 것을 발견 한 후 (예 : 허용되는 답변에는 모든 링크에 대해 jquery 줄이 필요함) 작업을 수행하기 위해 최소한의 코드가 필요한 방법을 발견했습니다. 적어도 Chrome에서는 완벽하게 작동하는 것으로 보입니다.
이 줄을 추가하여 활성화하십시오.
$('[data-toggle="popover"]').popover();
그리고이 설정은 앵커 링크에 연결됩니다.
data-toggle="popover" data-trigger="hover"
여기에서 실제로 볼 수 있습니다 . 허용 된 답변과 동일한 수입품을 사용하고 있으므로 오래된 프로젝트에서 잘 작동합니다.