programing

어떻게 하면 호버링되는 동안 부트스트랩 팝오버를 유지할 수 있습니까?

lastcode 2023. 8. 10. 18:50
반응형

어떻게 하면 호버링되는 동안 부트스트랩 팝오버를 유지할 수 있습니까?

나는 사용자 정보를 보여주는 호버 카드를 만들기 위해 부트스트랩 팝업을 사용하고 있으며, 버튼의 마우스 오버에서 그것을 트리거하고 있습니다.팝업 자체가 호버링되는 동안 이 팝업을 계속 유지하고 싶지만 사용자가 버튼 위를 맴도는 것을 멈추면 바로 사라집니다.어떻게 해야 하나요?

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

아래 코드 조각으로 테스트:

나의 사용 사례에 맞는 작은 수정 (비카스가 제공하는 솔루션에서)

  1. Open hover 이벤트 시 표시)
  2. 때.
  3. 팝업 단추 또는 팝업 상자에 대해 마우스 왼쪽에서 팝업을 닫습니다.

$(".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선택.

이 해킹은 기본적으로 포오버를 무시합니다.leave기능하지만 원본을 호출합니다(팝오버를 숨기기 위해 타이머를 시작함). 그런다일청연결다합니취를자회성음▁to▁a-다니▁then▁one▁attachesoff결연합▁it▁listener에 일회성 청취자를 붙입니다.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
                    })
                });

이렇게 하면 대상 요소 자체 내부에 팝업이 생성됩니다.그래서 마우스를 팝업 위로 이동해도 요소 위에 있습니다.부트스트랩 3.3.2는 이것과 잘 작동합니다.이전 버전에서는 애니메이션에 몇 가지 문제가 있을 수 있으므로 "애니메이션: false"를 사용하지 않도록 설정할 수 있습니다.

트리거 세트를 사용하여hover그리고 컨테이너 세트를 그에게 주었습니다.#element그리고 마지막으로 위치를 추가합니다.boxright.

설정은 다음과 같습니다.

$('#example').popover({
    html: true,
    trigger: 'hover',
    container: '#example',
    placement: 'right',
    content: function () {
        return '<div class="box"></div>';
    }
});

그리고.#example는 css가 필요합니다.position:relative;아래의 jsfidle을 확인합니다.

https://jsfiddle.net/9qn6pw4p/1/

편집됨

이 바이올린은 문제 없이 작동하는 두 링크를 모두 가지고 있습니다. http://jsfiddle.net/davidchase03/FQE57/4/

여기 모든 팝업을 켜기 위해 일반 부트스트랩 구현을 사용할 수 있도록 하는 동시에 잘 작동하는 것처럼 보이는 솔루션이 있습니다.

오리지널 바이올린: 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');
});

이것이 제가 인터넷 주변의 다른 비트들의 도움을 받아 부트스트랩 팝오버를 한 방법입니다.현장에 전시된 다양한 제품의 제목과 내용을 다이에서 동적으로 가져옵니다.각 제품 또는 팝업은 고유 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();
    };

저는 가장 좋은 방법은 데이비드 체이스, 쿨 리, 그리고 다른 사람들이 준 것을 사용하는 것이라는 것에 동의합니다. 이것을 하는 가장 간단한 방법은container: $(this)속성은 다음과 같습니다.

$(selectorString).each(function () {
  var $this = $(this);
  $this.popover({
    html: true,
    placement: "top",
    container: $this,
    trigger: "hover",
    title: "Popover",
    content: "Hey, you hovered on element"
  });
});

이 경우 팝업은 현재 요소의 모든 속성을 상속합니다.그래서, 예를 들어, 만약 당신이 이것을 한동안 한다면,.btn요소(부트스트랩), 팝업 내부의 텍스트를 선택할 수 없습니다.제가 이것에 대해 머리를 부딪치는 데 꽤 많은 시간을 보냈기 때문에 그것을 기록하고 싶었습니다.

Vikas 답변은 저에게 완벽하게 적용됩니다. 여기에 지연(표시/숨기기)에 대한 지원도 추가합니다.

var popover = $('#example');
var options = {
    animation : true,
    html: true,
    trigger: 'manual',
    placement: 'right',
    delay: {show: 500, hide: 100}
};   
popover
    .popover(options)
    .on("mouseenter", function () {

        var t = this;
        var popover = $(this);    
        setTimeout(function () {

            if (popover.is(":hover")) {

                popover.popover("show");
                popover.siblings(".popover").on("mouseleave", function () {
                    $(t).popover('hide');
                });
            }
        }, options.delay.show);
    })
    .on("mouseleave", function () {
        var t = this;
        var popover = $(this);

        setTimeout(function () {
            if (popover.siblings(".popover").length && !popover.siblings(".popover").is(":hover")) {
                $(t).popover("hide")
            }
        }, options.delay.hide);
    });

또한 제가 변경한 사항에 주의해 주십시오.

if (!$(".popover:hover").length) {

포함:

if (popover.siblings(".popover").length && !popover.siblings(".popover").is(":hover")) {

다른 것이 아니라 열린 팝업에서 정확히 참조하도록 합니다(지금은 지연을 통해 1개 이상이 동시에 열릴 수 있기 때문입니다)

선택한 답변은 작동하지만 팝업이 다음을 사용하여 초기화되면 실패합니다.body

$('a').popover({ container: 'body' });

선택한 답변에 기반한 솔루션은 팝업을 사용하기 전에 배치해야 하는 다음 코드입니다.

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);
    originalLeave.call(this, obj);

    if (obj.currentTarget) {
        self.$tip.one('mouseenter', function() {
            clearTimeout(self.timeout);
            self.$tip.one('mouseleave', function() {
                $.fn.popover.Constructor.prototype.leave.call(self, self);
            });
        })
    }
};

변경 사항은 다음을 사용하여 최소화합니다.self.$tipDOM을 통과하는 대신 팝업이 항상 요소의 형제가 될 것으로 예상합니다.

저는 최근에 이것을 KO와 함께 작업해야 했는데 위의 해결책들이 쇼 앤 히드에서 지연될 때 제대로 작동하지 않았습니다.아래 내용이 이 문제를 해결할 것입니다.부트스트랩 툴팁의 작동 방식을 기준으로 합니다.이것이 누군가에게 도움이 되기를 바랍니다.

var options = {
                delay: { show: 1000, hide: 50 },
                trigger: 'manual',                      
                html: true
            };
var $popover = $(element).popover(options);

$popover.on('mouseenter', function () { // This is entering the triggering element
    var self = this;

    clearTimeout(self.timeout);
    self.hoverState = 'in';

    self.timeout = setTimeout(function () {
        if (self.hoverState == 'in') {
            $(self).popover("show");

            $(".popover, .popover *").on('mouseover', function () { // This is moving over the popover
                clearTimeout(self.timeout);
            });                                                                 

            $(".popover").on('mouseleave', function () { // This is leaving the popover
                self.timeout = setTimeout(function () {
                    if (self.hoverState == 'out') {
                        $(self).popover('hide');
                    }
                }, options.delay.hide);
            });
        }
    }, options.delay.show);
}).on('mouseleave', function (event) { // This is leaving the triggering element
    var self = this;

    clearTimeout(self.timeout);
    self.hoverState = 'out';

    self.timeout = setTimeout(function () {                             
        if (self.hoverState == 'out') {
            $(self).popover('hide');
        }

    }, options.delay.hide);
});

파티에 좀 늦은 건 알지만 해결책을 찾고 있었어요.우연히 이 게시물에 부딪혔습니다.이것에 대한 저의 견해는 이렇습니다, 아마도 여러분 중 일부에게 도움이 될 것입니다.

html 파트:

<button type="button" class="btn btn-lg btn-danger" data-content="test" data-placement="right" data-toggle="popover" title="Popover title" >Hover to toggle popover</button><br>
// with custom html stored in a separate element, using "data-target"
<button type="button" class="btn btn-lg btn-danger" data-target="#custom-html" data-placement="right" data-toggle="popover" >Hover to toggle popover</button>

<div id="custom-html" style="display: none;">
    <strong>Helloooo!!</strong>
</div>

js 부분:

$(function () {
        let popover = '[data-toggle="popover"]';

        let popoverId = function(element) {
            return $(element).popover().data('bs.popover').tip.id;
        }

        $(popover).popover({
            trigger: 'manual',
            html: true,
            animation: false
        })
        .on('show.bs.popover', function() {
            // hide all other popovers  
            $(popover).popover("hide");
        })
        .on("mouseenter", function() {
            // add custom html from element
            let target = $(this).data('target');
            $(this).popover().data('bs.popover').config.content = $(target).html();

            // show the popover
            $(this).popover("show");
            
            $('#' + popoverId(this)).on("mouseleave", () => {
               $(this).popover("hide");
            });

        }).on("mouseleave", function() {
            setTimeout(() => {
                if (!$("#" + popoverId(this) + ":hover").length) {
                    $(this).popover("hide");
                }
            }, 100);
        });
    })

툴팁도 마찬가지입니다.

다음 솔루션은 모든 '마우스 입력기'에 이벤트 수신기를 추가하지 않고 툴팁을 활성화하는 툴팁 요소에 마우스를 다시 올릴 수 있기 때문에 작동합니다.

$ ->

  $('.element').tooltip({
    html: true,
    trigger: 'manual'
  }).
  on 'mouseenter', ->
    clearTimeout window.tooltipTimeout
    $(this).tooltip('show') unless $('.tooltip:visible').length > 0
  .
  on 'mouseleave', ->
    _this = this
    window.tooltipTimeout = setTimeout ->
      $(_this).tooltip('hide')
    , 100

$(document).on 'mouseenter', '.tooltip', ->
  clearTimeout window.tooltipTimeout

$(document).on 'mouseleave', '.tooltip', ->
  trigger = $($(this).siblings('.element')[0])
  window.tooltipTimeout = setTimeout ->
    trigger.tooltip('hide')
  , 100

이 솔루션은 저에게 잘 해결되었습니다: (이제는 방탄) ;-)

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'))
                {
                    $(_this).popover('hide');
                }
            }
        }, 200);
    });
}

        $(function() {
            $("[data-toggle = 'popover']").popover({
                placement: 'left',
                html: true,
                trigger: "  focus",
            }).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);
            });
        });

나는 찾았습니다.mouseleave창 포커스가 갑자기 변경되는 등 이상한 일이 발생해도 실행되지 않습니다. 그러면 사용자가 브라우저로 돌아갑니다.그런 경우에는mouseleave커서가 다시 요소를 벗어날 때까지 절대로 실행되지 않습니다.

제가 생각해 낸 이 해결책은mouseenter에서window마우스를 페이지의 다른 위치로 이동하면 개체가 사라집니다.

이 기능은 페이지에 트리거할 여러 요소(예: 표)를 사용하도록 설계되었습니다.

var allMenus = $(".menus");
allMenus.popover({
    html: true,
    trigger: "manual",
    placement: "bottom",
    content: $("#menuContent")[0].outerHTML
}).on("mouseenter", (e) => {
    allMenus.not(e.target).popover("hide");
    $(e.target).popover("show");
    e.stopPropagation();
}).on("shown.bs.popover", () => {
    $(window).on("mouseenter.hidepopover", (e) => {
        if ($(e.target).parents(".popover").length === 0) {
            allMenus.popover("hide");
            $(window).off("mouseenter.hidepopover");
        }
    });
});

보다 유연하게 사용할 수 있습니다.hover():

$(".my-popover").hover(
    function() {  // mouse in event
        $this = $(this);
        $this.popover({
            html: true,
            content: "Your content",
            trigger: "manual",
            animation: false
            });
        $this.popover("show");
        $(".popover").on("mouseleave", function() {
            $this.popover("hide");
        });
    },
    function() {  // mouse out event
        setTimeout(function() {
            if (!$(".popover:hover").length) {
                $this.popover("hide");
            }
        }, 100);
    } 
)

심플 :)

$('[data-toggle="popover"]').popover( { "container":"body", "trigger":"focus", "html":true });
$('[data-toggle="popover"]').mouseenter(function(){
    $(this).trigger('focus');
});

저는 승인된 답변과 이와 유사한 답변에 몇 가지 결함이 있다는 것을 발견했습니다.주로 마우스가 반복적으로 요소에 청취자를 남겨두는 것입니다.

저는 메모리 누수나 수신기의 부풀음 없이 문제의 기능을 달성하기 위해 그들의 솔루션을 몇 가지 사용자 정의 코드와 결합했습니다.

    var getPopoverTimeout = function ($el) {
        return $el.data('timeout');
    }
    $element.popover({
        trigger: "manual",
        html: true,
        content: ...,
        title: ...,
        container: $element
     }).on("mouseenter", function () {
        var $this = $(this);
        if (!$this.find('.popover').length) {
            $this.popover("show");
        } else if (getPopoverTimeout($element)) {
            clearTimeout(getPopoverTimeout($element));
        }
    }).on("mouseleave", function () {
        var $this = $(this);
        $element.data('timeout', setTimeout(function () {
            if (!$(".popover:hover").length) {
                $this.popover("hide")
            }
        }, 250));
    });

이것은 플래시가 들락날락하지 않도록 '호버 의도'와 같은 멋진 솔루션을 제공합니다.

이것은 부트스트랩 5를 위한 솔루션입니다.

let el = document.getElementById('poptest');
let popover = new bootstrap.Popover(el, { delay: { show: 0, hide: 500 }});

el.addEventListener('shown.bs.popover', function(ev) {
  let oldHandler = popover.hide, pel = $(popover.tip);
  pel.on('mouseenter', () => popover.hide = () => 1);
  pel.on('mouseleave', () => {
    popover.hide = oldHandler;
    popover.hide();
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-secondary m-5" data-bs-trigger="hover" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Hover here and it won't close!" id="poptest">
  Popover on top
</button>

개념은 우리가 그것을 무시한다는 것입니다.hide 기능합니다.mouseenter자동으로 닫히지 않고 복원할 수 있습니다.mouseleave.

이것은 지연이 있는 show dynamics 툴팁과 아약스에 의해 로드되는 나의 코드입니다.

$(window).on('load', function () {
    generatePopovers();
    
    $.fn.dataTable.tables({ visible: true, api: true }).on('draw.dt', function () {
        generatePopovers();
    });
});

$(document).ajaxStop(function () {
    generatePopovers();
});

function generatePopovers() {
var popover = $('a[href*="../Something.aspx"]'); //locate the elements to popover

popover.each(function (index) {
    var poplink = $(this);
    if (poplink.attr("data-toggle") == null) {
        console.log("RENDER POPOVER: " + poplink.attr('href'));
        poplink.attr("data-toggle", "popover");
        poplink.attr("data-html", "true");
        poplink.attr("data-placement", "top");
        poplink.attr("data-content", "Loading...");
        poplink.popover({
            animation: false,
            html: true,
            trigger: 'manual',
            container: 'body',
            placement: 'top'
        }).on("mouseenter", function () {
            var thispoplink = poplink;
            setTimeout(function () {
                if (thispoplink.is(":hover")) {
                    thispoplink.popover("show");
                    loadDynamicData(thispoplink); //load data by ajax if you want
                    $('body .popover').on("mouseleave", function () {
                        thispoplink.popover('hide');
                    });
                }
            }, 1000);
        }).on("mouseleave", function () {
            var thispoplink = poplink;
            setTimeout(function () {
                if (!$("body").find(".popover:hover").length) {
                    thispoplink.popover("hide");
                }
            }, 100);
        });
    }
});

function loadDynamicData(popover) {
    var params = new Object();
    params.somedata = popover.attr("href").split("somedata=")[1]; //obtain a parameter to send
    params = JSON.stringify(params);
    //check if the content is not seted
    if (popover.attr("data-content") == "Loading...") {
        $.ajax({
            type: "POST",
            url: "../Default.aspx/ObtainData",
            data: params,
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
            success: function (data) {
                console.log(JSON.parse(data.d));
                var dato = JSON.parse(data.d);
                if (dato != null) {
                    popover.attr("data-content",dato.something); // here you can set the data returned
                    if (popover.is(":hover")) {
                        popover.popover("show"); //use this for reload the view
                    }
                }
            },

            failure: function (data) {
                itShowError("- Error AJAX.<br>");
            }
        });
    }
}

언급URL : https://stackoverflow.com/questions/15989591/how-can-i-keep-bootstrap-popovers-alive-while-being-hovered

반응형

'programing' 카테고리의 다른 글

스키마 이름을 지정하지 않고 테이블에 액세스  (0) 2023.08.10
Xcode 7로 전환한 후 앱 크기가 9MB에서 60MB로 커졌는데 해결책이 있나요?  (0) 2023.08.10
CodeIgniter의 활성 레코드 메서드를 사용하여 ORDER BY 절을 추가하는 방법은 무엇입니까?  (0) 2023.08.10
사용 후 DB Command를 폐기해야 합니까?  (0) 2023.08.10
도커 합성을 사용하여 mysql의 기본 문자 집합을 변경하는 방법은 무엇입니까?  (0) 2023.08.10

'programing'의 다른글

  • 현재글어떻게 하면 호버링되는 동안 부트스트랩 팝오버를 유지할 수 있습니까?

관련글

댓글

티스토리툴바