[jquery] 호버링하는 동안 부트 스트랩 팝 오버를 유지하려면 어떻게해야합니까?

Program / 글쓴이

부트 스트랩 팝 오버를 사용하여 사용자 정보를 표시하는 호버 카드를 만들고 버튼을 마우스 오버하면 트리거합니다. 팝 오버 자체가 호버링되는 동안이 팝 오버를 유지하고 싶지만 사용자가 버튼 위로 마우스를 가져가는 것을 멈 추면 즉시 사라집니다. 어떻게 할 수 있습니까?

$('#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에서 제공하는 솔루션에서) 작은 수정.

  1. 팝 오버 버튼에 대한 호버 이벤트시 팝 오버 열기
  2. 팝 오버 상자 위로 마우스를 가져갈 때 팝 오버를 열어 둡니다.
  3. 팝 오버 버튼 또는 팝 오버 상자에 대해 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=&quot;http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/placement-groups.html&quot; target=&quot;_blank&quot;>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=&quot;http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/placement-groups.html&quot; target=&quot;_blank&quot;>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=&quot;http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/placement-groups.html&quot; target=&quot;_blank&quot;>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>';
    }
});

와 #exampleCSS를 요구 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');
});