Bagaimana cara agar popovers Bootstrap tetap hidup saat di-hover?

114

Saya menggunakan popover Bootstrap untuk membuat kartu hover yang menampilkan info pengguna, dan saya memicunya saat mengarahkan mouse ke tombol. Saya ingin menjaga popover ini tetap hidup saat popover itu sendiri sedang di-hover, tetapi popover itu menghilang segera setelah pengguna berhenti mengarahkan kursor ke tombol. Bagaimana saya bisa melakukan ini?

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

Luaskan cuplikan

jquery twitter-bootstrap popper.js vikas devde
sumber

kamu ingin mempertahankan hidup apa? saya mengarahkan kursor ke atas tombol dan tetap terbuka?

David Chase

baca baris pertanyaan terakhir

vikas devde

172

Uji dengan cuplikan kode di bawah ini:

Modifikasi kecil (Dari solusi yang disediakan oleh vikas) agar sesuai dengan kasus penggunaan saya.

Buka popover pada acara hover untuk tombol popover
Biarkan popover tetap terbuka saat mengarahkan kursor ke kotak popover
Tutup popover di kiri mouse untuk tombol popover, atau kotak popover.

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

Luaskan cuplikan

OkezieE
sumber

Ini bekerja dengan sempurna, saya perhatikan bahwa ada yang hilang ;dalam diri Anda $(_this).popover("hide"). Tapi terima kasih, itu sangat sederhana dan bersih!

kambing hitam

3

Jawaban ini luar biasa. Berfungsi dengan baik di BS3 mulai Mei 2015 ^^

merosot

1

Saya menggunakannya dalam tabel dan saya menambahkan container: 'body'opsi karena itu membuat sel bergeser. Jawaban yang bagus!

Alexander Derck

Popover disembunyikan jika Anda memasukkannya dan kemudian kembali ke elemen pemicu sebelum 300 md. Untuk memperbaikinya, periksa apakah KEDUA popover dan pemicunya adalah: arahkan kursor sebelum menyembunyikannya di setTimeout. Saya juga akan menggunakan setTimeout dan pendekatan yang sama pada mouse biarkan popover itu sendiri, untuk memperbaiki kedipan.

rzb

Pastikan untuk mengatur animation:falseuntuk memperbaiki flicker - periksa di tautan Plunker yang saya miliki di atas. Ini bekerja dengan sempurna untuk saya.

OkezieE

84

Saya datang setelah solusi lain untuk ini ... ini kodenya

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

6

Penting untuk menambahkan animation: falsejika tidak menggerakkan mouse di atas tautan berulang kali akan menyebabkannya tidak berfungsi dengan benar

jasop

5

Saya memiliki sedikit modifikasi pada kode Anda @vikas ( gist.github.com/Nitrodist/7913848 ). Ini memeriksa ulang kondisi setelah 50ms sehingga tidak tetap terbuka. Artinya, terus menerus memeriksanya setiap 50 ms.

Nitrodist

2

Bagaimana ini bisa diadaptasikan sehingga berfungsi pada elemen langsung yang baru saja ditambahkan ke dokumen?

williamsowen

28

Ini pendapat saya: http://jsfiddle.net/WojtekKruszewski/Zf3m7/22/

Terkadang saat memindahkan mouse dari pemicu popover ke konten popover aktual secara diagonal , Anda mengarahkan kursor ke elemen di bawah. Saya ingin menangani situasi seperti itu - selama Anda mencapai konten popover sebelum waktu tunggu habis, Anda aman (popover tidak akan hilang). Itu membutuhkan delayopsi.

Peretasan ini pada dasarnya mengesampingkan leavefungsi Popover , tetapi memanggil yang asli (yang memulai pengatur waktu untuk menyembunyikan popover). Kemudian itu melampirkan pendengar satu kali ke mouseenterelemen konten popover.

Jika mouse memasuki popover, timer dihapus. Kemudian ternyata mendengarkan mouseleavedi popover dan jika dipicu, itu memanggil fungsi cuti asli sehingga bisa mulai menyembunyikan timer.

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
sumber

5

Menemukan wadah dapat ditingkatkan dengan menggunakan container = self.$tip;cara ini, popover bahkan dapat ditemukan ketika containerproperti diatur. Ada biola di sini: jsfiddle.net/dennis_c/xJc65

dbroeks

3

@pferrel Saya telah memecahkan masalah ini di garpu saya dari biola @Wojtek_Kruszewski : jsfiddle.net/HugeHugh/pN26d lihat bagian yang memeriksa if (!thisTip.is(':visible'))sebelum meneleponoriginalShow()

H Dog

1

Jika popover diinisialisasi dengan opsi container: 'body',, solusi ini tidak akan berfungsi seperti yang diharapkan. Variabel containerperlu diganti dengan self.$tip. Periksa jawaban saya untuk detail lebih lanjut: stackoverflow.com/a/28731847/439427

Rubens Mariuzzo

1

Cemerlang. Ini berfungsi saat menggunakan parameter 'selector', tidak seperti jawaban lainnya.

jetlej

1

Berikut adalah versi perbaikan yang memperbaiki bug saat keluar dan masuk kembali tip masih menyembunyikannya, dan juga memperbaiki skenario saat tip dipasang ke tubuh jsfiddle.net/Zf3m7/1499

Zoltán Tamási

14

Saya pikir cara yang mudah adalah ini:

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

Dengan cara ini popover dibuat di dalam elemen target itu sendiri. jadi saat Anda menggerakkan mouse ke atas popover, itu masih di atas elemen. Bootstrap 3.3.2 bekerja dengan baik dengan ini. Versi yang lebih lama mungkin memiliki beberapa masalah dengan animasi, jadi Anda mungkin ingin menonaktifkan "animation: false"

Cu Lý
sumber

Saya tahu utas ini sudah tua, tetapi ini adalah solusi terbaik dan terbersih menurut saya dan harus diberi peringkat lebih tinggi. Satu-satunya peringatan adalah bahwa ini akan rusak, jika Anda memposisikan popover (dengan cara yang aneh) "menjauh" dari elemen pemicu. Namun selama jarak antara keduanya adalah nol (mis. Keduanya tumpang tindih), ini berfungsi dengan baik dan tidak memerlukan JS kustom. Terima kasih!

JohnGalt

Itu adalah solusi terbaik, bersih, dan termudah sejauh ini. Harus berperingkat lebih tinggi! Saya menambahkan delay: { "hide": 400 }untuk menambahkan beberapa penundaan sebelum bersembunyi dan itu berfungsi dengan baik! 👍

coorasse

14

Saya menggunakan set pemicu ke hoverdan memberikan set wadah ke #elementdan akhirnya menambahkan penempatan boxkeright .

Ini harus menjadi pengaturan Anda:

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

dan #examplecss perlu position:relative;memeriksa jsfiddle di bawah ini:

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

Diedit

Biola ini memiliki kedua tautan yang berfungsi tanpa masalah http://jsfiddle.net/davidchase03/FQE57/4/

David Chase
sumber

hmm itu berfungsi, dapatkah saya menggunakan jquery ajax di contentopsi, untuk mengambil konten dari sisi server..akan itu berfungsi atau saya perlu melakukan beberapa pekerjaan tambahan untuk itu

vikas devde

@vikasdevde ya Anda dapat menggunakan ajaxdalam konten tetapi Anda perlu mengatur agar itu berfungsi ... tolong tandai jawaban dengan benar jika itu menyelesaikannya OP.. sehingga orang lain bisa mendapatkan keuntungan

David Chase

tetapi jika kita menggunakan tautan itu sendiri sebagai wadah maka seluruh popover menjadi tautan .... coba saja

vikas devde

jika Anda meletakkan tautan di dalam kotak, tautan itu akan tetap keluar .. benar?

David Chase

2

Tidak ada satupun jsfiddle yang cocok untukku. Chrome 20 Maret 2014.

pferrel

7

Ini adalah bagaimana saya melakukannya dengan bootstrap popover dengan bantuan bit lain di internet. Secara dinamis mendapatkan judul dan konten dari berbagai produk yang ditampilkan di situs. Setiap produk atau popover mendapatkan id unik. Popover akan hilang saat keluar dari produk ($ this .pop) atau popover. Timeout digunakan dimana akan menampilkan popover sampai exit through product bukan popover.

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

Ini juga akan berfungsi jika popover bukan anak dari elemen target. +1

Taha Paksu

6

Berikut adalah solusi yang saya buat yang tampaknya berfungsi dengan baik sementara juga memungkinkan Anda untuk menggunakan implementasi Bootstrap normal untuk menyalakan semua popovers.

Biola asli: https://jsfiddle.net/eXpressive/hfear592/

Diterjemahkan ke pertanyaan ini:

<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
sumber

2

Saya setuju bahwa cara terbaik adalah menggunakan yang diberikan oleh: David Chase , Cu Ly, dan lainnya bahwa cara termudah untuk melakukannya adalah dengan menggunakan container: $(this)properti sebagai berikut:

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

Saya ingin menunjukkan di sini bahwa popover dalam hal ini akan mewarisi semua properti elemen saat ini . Jadi, misalnya, jika Anda melakukan ini untuk sebuah .btnelemen (bootstrap), Anda tidak akan dapat memilih teks di dalam popover . Hanya ingin merekam itu karena saya menghabiskan cukup banyak waktu membenturkan kepala saya pada ini.

forumulator
sumber

1

Jawaban Vikas bekerja dengan sempurna untuk saya, di sini saya juga menambahkan dukungan untuk penundaan (tampilkan / sembunyikan).

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

Juga harap perhatikan saya berubah:

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

dengan:

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

sehingga mereferensikan persis pada popover yang dibuka itu, dan bukan yang lain (karena sekarang, melalui penundaan, lebih dari 1 dapat dibuka pada waktu yang sama)

user1993198
sumber

Komentar yang saya lakukan di akhir sebenarnya kurang tepat saat menggunakan container: body, jika demikian masih harus menggunakan solusi Vikas untuk satu baris itu

user1993198

1

Jawaban yang dipilih berfungsi tetapi akan gagal jika popover diinisialisasi dengan bodysebagai wadah.

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

Solusi berdasarkan jawaban yang dipilih adalah kode berikut yang perlu ditempatkan sebelum menggunakan popover.

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

Perubahannya minimal menggunakan self.$tipalih-alih melintasi DOM yang mengharapkan popover selalu menjadi saudara dari elemen.

Rubens Mariuzzo
sumber

0

Hal yang sama untuk tooltips:

Bagi saya, solusi berikut berfungsi karena tidak menambahkan event listener pada setiap 'mouseenter' dan dimungkinkan untuk mengarahkan kursor kembali ke elemen tooltip yang membuat tooltip tetap hidup.

$ ->

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

0

Solusi ini bekerja dengan baik untuk saya: (sekarang antipeluru) ;-)

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
sumber

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
sumber

0

Saya menemukan mouseleavetidak akan menyala ketika hal-hal aneh terjadi, seperti fokus jendela berubah tiba-tiba, lalu pengguna kembali ke browser. Dalam kasus seperti itu,mouseleave tidak akan pernah menyala sampai kursor berpindah dan meninggalkan elemen lagi.

Solusi ini saya datang dengan mengandalkan mouseenterpada windowobjek, sehingga menghilang ketika mouse digerakkan di tempat lain pada halaman.

Ini dirancang untuk bekerja dengan memiliki beberapa elemen pada halaman yang akan memicunya (seperti dalam tabel).

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
sumber

0

Ini akan lebih fleksibel dengan 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);
    } 
)

Gray Li
sumber

0

Sederhana :)

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

edmc73.dll
sumber

0

Saya baru-baru ini perlu membuat ini berfungsi dengan KO dan solusi di atas tidak berfungsi dengan baik ketika mengalami penundaan pertunjukan dan persembunyian. Di bawah ini harus memperbaiki ini. Berdasarkan cara kerja tooltips bootstrap. Semoga ini bisa membantu seseorang.

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
sumber

-1

Ini adalah kode saya untuk tooltips show dynamics dengan penundaan dan dimuat oleh ajax.

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

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

Luaskan cuplikan

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

Luaskan cuplikan

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

Luaskan cuplikan

Giuliano
sumber

Bagaimana cara agar popovers Bootstrap tetap hidup saat di-hover?

Jawaban:

Diedit