부트 스트랩 팝 오버를 사용하여 사용자 정보를 표시하는 호버 카드를 만들고 버튼을 마우스 오버하면 트리거합니다. 팝 오버 자체가 호버링되는 동안이 팝 오버를 유지하고 싶지만 사용자가 버튼 위로 마우스를 가져가는 것을 멈 추면 즉시 사라집니다. 어떻게 할 수 있습니까?
$('#example').popover({
html : true,
trigger : 'manual',
content : function() {
return '<div class="box">Popover</div>';
}
});
$(document).on('mouseover', '#example', function(){
$('#example').popover('show');
});
$(document).on('mouseleave', '#example', function(){
$('#example').popover('hide');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<a href="#" id="example" class="btn btn-danger" rel="popover" >hover for popover</a>
답변
아래 코드 조각으로 테스트하십시오.
내 사용 사례에 맞게 (vikas에서 제공하는 솔루션에서) 작은 수정.
- 팝 오버 버튼에 대한 호버 이벤트시 팝 오버 열기
- 팝 오버 상자 위로 마우스를 가져갈 때 팝 오버를 열어 둡니다.
- 팝 오버 버튼 또는 팝 오버 상자에 대해 mouseleave시 팝 오버를 닫습니다.
$(".pop").popover({
trigger: "manual",
html: true,
animation: false
})
.on("mouseenter", function() {
var _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function() {
$(_this).popover('hide');
});
}).on("mouseleave", function() {
var _this = this;
setTimeout(function() {
if (!$(".popover:hover").length) {
$(_this).popover("hide");
}
}, 300);
});
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h2 class='text-primary'>Another Great "KISS" Bootstrap Popover example!</h2>
<p class='text-muted'>KISS = Keep It Simple S....</p>
<p class='text-primary'>Goal:</p>
<ul>
<li>Open popover on hover event for the popover button</li>
<li>Keep popover open when hovering over the popover box</li>
<li>Close popover on mouseleave for either the popover button, or the popover box.</li>
</ul>
<button type="button" class="btn btn-danger pop" data-container="body" data-toggle="popover" data-placement="right" data-content="Optional parameter: Skip if this was not requested<br> A placement group is a logical grouping of instances within a single Availability Zone. Using placement groups enables applications to get the full-bisection bandwidth and low-latency network performance required for tightly coupled, node-to-node communication typical of HPC applications.<br> This only applies to cluster compute instances: cc2.8xlarge, cg1.4xlarge, cr1.8xlarge, hi1.4xlarge and hs1.8xlarge.<br> More info: <a href="http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/placement-groups.html" target="_blank">Click here...</a>"
data-original-title="" title="">
HOVER OVER ME
</button>
<br><br>
<button type="button" class="btn btn-info pop" data-container="body" data-toggle="popover" data-placement="right" data-content="Optional parameter: Skip if this was not requested<br> A placement group is a logical grouping of instances within a single Availability Zone. Using placement groups enables applications to get the full-bisection bandwidth and low-latency network performance required for tightly coupled, node-to-node communication typical of HPC applications.<br> This only applies to cluster compute instances: cc2.8xlarge, cg1.4xlarge, cr1.8xlarge, hi1.4xlarge and hs1.8xlarge.<br> More info: <a href="http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/placement-groups.html" target="_blank">Click here...</a>"
data-original-title="" title="">
HOVER OVER ME... Again!
</button><br><br>
<button type="button" class="btn btn-success pop" data-container="body" data-toggle="popover" data-placement="right" data-content="Optional parameter: Skip if this was not requested<br> A placement group is a logical grouping of instances within a single Availability Zone. Using placement groups enables applications to get the full-bisection bandwidth and low-latency network performance required for tightly coupled, node-to-node communication typical of HPC applications.<br> This only applies to cluster compute instances: cc2.8xlarge, cg1.4xlarge, cr1.8xlarge, hi1.4xlarge and hs1.8xlarge.<br> More info: <a href="http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/placement-groups.html" target="_blank">Click here...</a>"
data-original-title="" title="">
Okay one more time... !
</button>
<br><br>
<p class='text-info'>Hope that helps you... Drove me crazy for a while</p>
<script src="script.js"></script>
</body>
</html>
답변
나는 이것에 대한 또 다른 해결책을 찾았습니다 … 여기에 코드가 있습니다.
$('.selector').popover({
html: true,
trigger: 'manual',
container: $(this).attr('id'),
placement: 'top',
content: function () {
$return = '<div class="hover-hovercard"></div>';
}
}).on("mouseenter", function () {
var _this = this;
$(this).popover("show");
$(this).siblings(".popover").on("mouseleave", function () {
$(_this).popover('hide');
});
}).on("mouseleave", function () {
var _this = this;
setTimeout(function () {
if (!$(".popover:hover").length) {
$(_this).popover("hide")
}
}, 100);
});
답변
내 의견은 다음과 같습니다. http://jsfiddle.net/WojtekKruszewski/Zf3m7/22/
때때로 마우스를 팝 오버 트리거에서 실제 팝 오버 콘텐츠로 대각선으로 이동하는 동안 아래 요소 위로 마우스를 가져갑니다. 이러한 상황을 처리하고 싶었습니다. 타임 아웃이 시작되기 전에 팝 오버 콘텐츠에 도달하는 한 안전합니다 (팝 오버가 사라지지 않음). delay
옵션 이 필요합니다 .
이 해킹은 기본적으로 Popover leave
기능을 재정의 하지만 원본을 호출합니다 ( 팝 오버 를 숨기기 위해 타이머를 시작 함). 그런 다음 mouseenter
팝 오버 콘텐츠 요소에 일회용 리스너를 연결합니다 .
마우스가 팝 오버에 들어가면 타이머가 지워집니다. 그런 다음 mouseleave
팝 오버시 청취하고 트리거되면 원래의 나가기 기능을 호출하여 타이머 숨기기를 시작할 수 있습니다.
var originalLeave = $.fn.popover.Constructor.prototype.leave;
$.fn.popover.Constructor.prototype.leave = function(obj){
var self = obj instanceof this.constructor ?
obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type)
var container, timeout;
originalLeave.call(this, obj);
if(obj.currentTarget) {
container = $(obj.currentTarget).siblings('.popover')
timeout = self.timeout;
container.one('mouseenter', function(){
//We entered the actual popover – call off the dogs
clearTimeout(timeout);
//Let's monitor popover content instead
container.one('mouseleave', function(){
$.fn.popover.Constructor.prototype.leave.call(self, self);
});
})
}
};
답변
쉬운 방법은 다음과 같습니다.
$('.popover').each(function () {
var $this = $(this);
$this.popover({
trigger: 'hover',
content: 'Content Here',
container: $this
})
});
이렇게하면 팝 오버가 대상 요소 자체 내에 생성됩니다. 따라서 마우스를 팝 오버 위로 이동해도 여전히 요소 위에 있습니다. Bootstrap 3.3.2는 이것과 잘 작동합니다. 이전 버전은 애니메이션에 문제가있을 수 있으므로 “animation : false”를 비활성화하는 것이 좋습니다.
답변
나는 트리거 세트를 사용 hover
하고 컨테이너받는 세트 준 #element
의 배치 추가 마침내과 box
에를 right
.
이것이 귀하의 설정이어야합니다.
$('#example').popover({
html: true,
trigger: 'hover',
container: '#example',
placement: 'right',
content: function () {
return '<div class="box"></div>';
}
});
와 #example
CSS를 요구 position:relative;
jsfiddle 아래를 확인 :
https://jsfiddle.net/9qn6pw4p/1/
수정 됨
이 바이올린에는 문제없이 작동하는 두 링크가 모두 있습니다.
http://jsfiddle.net/davidchase03/FQE57/4/
답변
이것이 내가 네트워크 주변의 다른 비트의 도움으로 부트 스트랩 팝 오버로 한 방법입니다. 사이트에 표시되는 다양한 제품에서 제목과 콘텐츠를 동적으로 가져옵니다. 각 제품 또는 팝 오버는 고유 한 ID를 갖습니다. 팝 오버는 제품 ($ this .pop) 또는 팝 오버를 종료 할 때 사라집니다. 타임 아웃은 팝 오버 대신 제품을 통과 할 때까지 팝 오버를 표시하는 위치에 사용됩니다.
$(".pop").each(function () {
var $pElem = $(this);
$pElem.popover(
{
html: true,
trigger: "manual",
title: getPopoverTitle($pElem.attr("id")),
content: getPopoverContent($pElem.attr("id")),
container: 'body',
animation:false
}
);
}).on("mouseenter", function () {
var _this = this;
$(this).popover("show");
console.log("mouse entered");
$(".popover").on("mouseleave", function () {
$(_this).popover('hide');
});
}).on("mouseleave", function () {
var _this = this;
setTimeout(function () {
if (!$(".popover:hover").length) {
$(_this).popover("hide");
}
}, 100);
});
function getPopoverTitle(target) {
return $("#" + target + "_content > h3.popover-title").html();
};
function getPopoverContent(target) {
return $("#" + target + "_content > div.popover-content").html();
};
답변
다음은 모든 팝 오버를 켜기 위해 일반 부트 스트랩 구현을 사용할 수 있도록 허용하면서 잘 작동하는 것처럼 보이는 솔루션입니다.
원래 바이올린 : https://jsfiddle.net/eXpressive/hfear592/
이 질문에 이식 :
<a href="#" id="example" class="btn btn-danger" rel="popover" >hover for popover</a>
$('#example').popover({
html : true,
trigger : 'hover',
content : function() {
return '<div class="box"></div>';
}
}).on('hide.bs.popover', function () {
if ($(".popover:hover").length) {
return false;
}
});
$('body').on('mouseleave', '.popover', function(){
$('.popover').popover('hide');
});