Fareyle üzerine gelindiğinde Bootstrap açılır pencerelerini nasıl canlı tutabilirim?

114

Kullanıcı bilgilerini gösteren bir bilgi kartı oluşturmak için bir Bootstrap açılır penceresi kullanıyorum ve bir düğmenin fareyle üzerine gelindiğinde onu tetikliyorum. Açılır bilgi penceresinin kendisi üzerine gelindiğinde bu açılır pencereyi canlı tutmak istiyorum, ancak kullanıcı düğmenin üzerine gelmeyi bırakır bırakmaz kaybolur. Bunu nasıl yapabilirim?

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

Snippet'i genişlet

jquery twitter-bootstrap popper.js

— Vikas devde
kaynak

neyi canlı tutmak istiyorsun? düğmenin üzerine geldim ve açık kaldı mı?

— David Chase

son soru satırını oku

— vikas devde

172

Aşağıdaki kod parçacığı ile test edin:

Küçük değişiklik (vikas tarafından sağlanan çözümden) kullanım durumuma uyacak şekilde.

Popover düğmesi için fareyle üzerine gelindiğinde açılır bilgi penceresini aç
Açılır bilgi kutusunun üzerine gelindiğinde açılır bilgi penceresini açık tutun
Açılır pencere düğmesi veya açılır kutu için fare üzerindeki açılır pencereyi kapatın.

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

Snippet'i genişlet

— OkezieE
kaynak

Bu mükemmel çalışıyor, ;saniyeler içinde bir eksiklik olduğunu fark ettim $(_this).popover("hide"). Ama teşekkürler, çok basit ve temizdi!

— günah keçisi17

3

Bu cevap harika. Mayıs 2015 itibarıyla BS3'te harika çalışıyor ^^

— dejenere

1

Bunu bir tabloda kullandım ve container: 'body'seçeneklere ekledim çünkü hücrelerin değişmesini sağladı. Mükemmel cevap!

— Alexander Derck

Açılır bilgi penceresine girerseniz ve 300 ms'den önce tetikleyici öğeye geri dönerseniz gizlenir. Düzeltmek için, açılır bilgi penceresinin HEM DE tetikleyicisinin olup olmadığını kontrol edin: setTimeout'ta gizlemeden önce üzerine gelin. Ayrıca, titremeyi düzeltmek için setTimeout ve aynı yaklaşımı popover'ın kendisinde de kullandım.

— rzb

animation:falseTitreşimi düzeltmek için ayarladığınızdan emin olun - yukarıda sahip olduğum Plunker bağlantısını kontrol edin. Benim için mükemmel çalışıyor.

— OkezieE

84

Bunun için başka bir çözümün peşinden geldim ... işte kod

    $('.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);
    });

— Vikas devde
kaynak

6

Eklemek önemlidir, animation: falseaksi takdirde fareyi bağlantının üzerine tekrar tekrar hareket ettirmek doğru çalışmamasına neden olur

— jasop

5

@Vikas ( gist.github.com/Nitrodist/7913848 ) kodunuzda küçük bir değişiklik yaptım . Açık kalmaması için 50 ms sonra durumu tekrar kontrol eder. Yani, her 50 ms'de bir sürekli olarak yeniden kontrol eder.

— Nitrodist

2

Bu, belgeye yeni eklenen canlı öğeler üzerinde çalışacak şekilde nasıl uyarlanabilir?

— williamsowen

28

İşte benim almam: http://jsfiddle.net/WojtekKruszewski/Zf3m7/22/

Bazen fareyi açılır pencere tetikleyicisinden gerçek açılır bilgi içeriğine çapraz olarak hareket ettirirken , aşağıdaki öğelerin üzerine gelirsiniz . Bu tür durumlarla başa çıkmak istedim - zaman aşımı tetiklenmeden önce açılır bilgi içeriğine ulaştığınız sürece güvendesiniz (açılır pencere kaybolmayacak). delaySeçenek gerektirir .

Bu hack temelde Popover leaveişlevini geçersiz kılar , ancak orijinali çağırır (açılır pencereyi gizlemek için zamanlayıcıyı başlatır). Ardından, mouseenterpopover içerik öğelerine tek seferlik bir dinleyici ekler .

Fare açılır pencereye girerse, zamanlayıcı temizlenir. Ardından mouseleaveaçılır pencereyi dinler ve tetiklenirse, zamanlayıcıyı gizlemeye başlayabilmesi için orijinal ayrılma işlevini çağırır.

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);
      });
    })
  }
};

— Wojtek Kruszewski
kaynak

5

Kapsayıcıyı bulmak, kullanılarak geliştirilebilir container = self.$tip;Bu şekilde, açılır bilgi penceresi containerözellik ayarlandığında bile bulunabilir . Burada bir keman var: jsfiddle.net/dennis_c/xJc65

— dbroeks

3

@pferrel Bu sorunu @Wojtek_Kruszewski'nin keman çatalında çözdüm: jsfiddle.net/HugeHugh/pN26dif (!thisTip.is(':visible'))originalShow()

— H Dog'u

1

Açılır bilgi penceresi seçeneği ile başlatılırsa, container: 'body',bu çözüm beklendiği gibi çalışmayacaktır. Değişkenin containerile değiştirilmesi gerekiyor self.$tip. Daha fazla ayrıntı için cevabımı kontrol edin: stackoverflow.com/a/28731847/439427

— Rubens Mariuzzo

1

Parlak. Bu, diğer cevaplardan farklı olarak 'seçici' parametresini kullanırken işe yarar.

— jetlej

1

Burada, uçtan çıkarken ve yeniden girerken ortaya çıkan bir hatayı düzelten ve aynı zamanda ucun gövdeye takılı olduğu senaryoyu düzelten gelişmiş bir sürüm var jsfiddle.net/Zf3m7/1499

— Zoltán

14

Sanırım kolay bir yol bu olabilir:

$('.popover').each(function () {
                    var $this = $(this);
                    $this.popover({
                        trigger: 'hover',
                        content: 'Content Here',
                        container: $this
                    })
                });

Bu şekilde açılır bilgi penceresi, hedef öğenin kendi içinde oluşturulur. böylece farenizi açılır bilgi penceresinin üzerine getirdiğinizde, hala öğenin üzerindedir. Bootstrap 3.3.2 bununla iyi çalışır. Daha eski sürümde animasyonla ilgili bazı sorunlar olabilir, bu nedenle "animation: false" seçeneğini devre dışı bırakmak isteyebilirsiniz.

— Cu Lý
kaynak

Bu iş parçacığının eski olduğunu biliyorum, ancak bu bence en iyi, en temiz çözüm ve daha üst sıralarda yer alması gerekiyor. Tek uyarı, açılır pencereyi tetikleyici öğeden "uzağa" (garip bir şekilde) konumlandırırsanız, bunun bozulacağıdır. Ancak ikisi arasındaki mesafe sıfır olduğu sürece (ör. Üst üste geldiklerinde), bu çok güzel çalışır ve herhangi bir özel JS gerektirmez. Teşekkür ederim!

— JohnGalt

Şimdiye kadarki en iyi, temiz, en kolay çözüm budur. Daha üst sıralarda yer almalı! delay: { "hide": 400 }Saklanmadan önce biraz gecikme eklemek için ekledim ve harika çalışıyor! 👍

— coorasse

14

Ben tetik seti kullanıldı hoverve kapsayıcı seti verdi #elementve sonunda bir yerleşim ekleyerek boxiçinright .

Bu sizin kurulumunuz olmalı:

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

ve #examplecss ihtiyaçlarıposition:relative; aşağıdaki jsfiddle'ı kontrol etmelidir:

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

Düzenlenen

Bu keman, sorunsuz çalışan iki bağlantıya da sahiptir http://jsfiddle.net/davidchase03/FQE57/4/

— David Chase
kaynak

hmm bu işe yarıyor, contentiçeriği sunucu tarafından almak için seçenek olarak jquery ajax kullanabilir miyim.. bu işe yarayacak mı yoksa bunun için fazladan iş yapmam gerekecek

— vikas devde

@vikasdevde evet kullanabilirsiniz ajaxiçeriğinde ancak işe bunun için kurulum kadar gerek ... o senin çözüldü doğru olmadığını cevabı işaretleyin OPdiğerleri yararlanabilir böylece ..

— David Chase

ancak bağlantının kendisini bir kapsayıcı olarak kullanırsak, açılır pencerenin tamamı bir bağlantı haline gelir .... deneyin

— vikas devde

kutunun içine bir bağlantı koyarsanız, yine de bağlantı kurulacaktır .. doğru mu?

— David Chase

2

Jsfiddle'ın hiçbiri benim için işe yaramaz. Chrome 20 Mart 2014.

— pferrel

7

Bu, ağdaki diğer bitlerin yardımıyla bootstrap popover ile yaptığım şeydi. Sitede görüntülenen çeşitli ürünlerden dinamik olarak başlık ve içerik alır. Her ürün veya açılır bilgi penceresi benzersiz bir kimlik alır. Üründen ($ this .pop) veya açılır pencereden çıkarken açılır pencere kaybolacaktır. Zaman aşımı, açılır bilgi penceresinin açılır pencere yerine üründen çıkana kadar görüntüleneceği yerde kullanılır.

$(".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();
    };

— hoektoe
kaynak

Bu, açılır bilgi penceresi hedef öğenin alt öğesi değilse de işe yarar. +1

— Taha Paksu

6

Burada, tüm açılır pencereleri açmak için normal Bootstrap uygulamasını kullanmanıza izin verirken iyi çalışıyor gibi görünen bir çözüm var.

Orijinal keman: https://jsfiddle.net/eXpressive/hfear592/

Bu soruya aktarıldı:

<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');
});

— eXpressiveDesign
kaynak

2

En iyi yolun David Chase , Cu Ly ve diğerleri tarafından verilen yolu kullanmak olduğunu kabul ediyorum, bunu yapmanın en basit yolu container: $(this)mülkü aşağıdaki gibi kullanmaktır :

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

Burada, bu durumda açılır pencerenin mevcut öğenin tüm özelliklerini miras alacağını belirtmek isterim . Dolayısıyla, örneğin, bunu bir .btnöğe (bootstrap) için yaparsanız, açılır pencerenin içindeki metni seçemezsiniz . Sadece bunu kaydetmek istedim, çünkü epeyce kafamı buna vurarak geçirdim.

— forumulator
kaynak

1

Vikas cevabı benim için mükemmel çalışıyor, burada ayrıca gecikme için destek ekliyorum (göster / gizle).

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);
    });

Ayrıca lütfen değiştiğime dikkat edin:

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

ile:

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

Böylece, tam olarak o açılan açılır pencereye atıfta bulunur, başka hiçbirine başvurmaz (şu andan beri, gecikme yoluyla, aynı anda 1'den fazla açık olabilir)

— user1993198
kaynak

Sonunda yaptığım yorum aslında konteyner kullanırken doğru değil: gövde, öyleyse yine de

— Vikas'ın

1

Seçilen cevap işe yarar, ancak açılır bilgi penceresi bodykonteyner olarak başlatılırsa başarısız olur .

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

Seçilen yanıta dayalı bir çözüm, açılır pencereyi kullanmadan önce yerleştirilmesi gereken aşağıdaki koddur.

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);
            });
        })
    }
};

Değişiklik, self.$tipaçılır pencerenin her zaman öğenin kardeşleri olmasını bekleyerek DOM'u geçmek yerine minimum kullanımdadır .

— Rubens Mariuzzo
kaynak

0

Araç ipuçları için de aynı şey:

Benim için aşağıdaki çözüm işe yarıyor çünkü her 'mouseenter'e olay dinleyicileri eklemiyor ve araç ipucunu canlı tutan araç ipucu öğesinin üzerine geri dönmek mümkün.

$ ->

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

— phlppn
kaynak

0

Bu çözüm benim için iyi oldu: (artık kurşun geçirmez) ;-)

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);
    });
}

— Johannes Ferner
kaynak

0

        $(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);
            });
        });

— Dinesh Sarak
kaynak

0

mouseleavePencere odağının aniden değişmesi gibi garip şeyler olduğunda ateşlenmeyeceğini buldum , ardından kullanıcı tarayıcıya geri dönüyor. Böyle durumlardamouseleave , imleç üzerine gidip öğeyi tekrar terk edene kadar asla ateşlenmez.

Ben ile geldi Bu çözüm dayanır mouseenterüzerine windowfare taşındığında kaybolur, böylece nesne başka bir yerde sayfada.

Bu, sayfada kendisini tetikleyecek birden çok öğeye sahip olmak üzere çalışmak üzere tasarlanmıştır (bir tablodaki gibi).

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");
        }
    });
});

— Gabriel Luci
kaynak

0

Daha olacaktır esnek ile 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);
    } 
)

— Gri Li
kaynak

0

Basit :)

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

— edmc73
kaynak

0

Son zamanlarda bunu KO ile çalıştırmaya ihtiyacım vardı ve yukarıdaki çözümler, gösteride ve gizlemede gecikme yaşarken iyi çalışmadı. Aşağıdakiler bunu düzeltmelidir. Önyükleme araç ipuçlarının nasıl çalıştığına göre. Umarım bu birine yardımcı olur.

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);
});

— Zarthost Boman
kaynak

-1

Bu, ajax tarafından yüklenen ve gecikmeli gösteri dinamikleri araç ipuçları için kodum.

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

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

Snippet'i genişlet

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);
        });
    }
});

Snippet'i genişlet

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>");
            }
        });
    }
}

Snippet'i genişlet

— Giuliano
kaynak