Buat Bootstrap Popover Muncul / Hilang di Hover, bukan Klik

181

Saya sedang membangun situs web dengan Bootstrap's Popover dan saya tidak tahu bagaimana cara membuat popover itu muncul di hover, bukan klik.

Yang ingin saya lakukan adalah membuat popover muncul ketika seseorang melayang di atas tautan alih-alih mengkliknya dan popover menghilang ketika mereka pindah. Dokumentasi mengatakan itu mungkin menggunakan atribut data atau jquery. Saya lebih suka melakukannya dengan jquery karena saya memiliki beberapa popover.

javascript jquery twitter-bootstrap Muhambi
sumber
20
Tip: Arahkan kursor ke perangkat sentuh. Jika Anda ingin memastikan kegunaan untuk layar sentuh, jangan ikat fungsi untuk melayang.
Jørgen R

Jawaban:

374

Tetapkan triggeropsi popover hoversebagai ganti click, yang merupakan default .

Ini dapat dilakukan dengan menggunakan salah satu data-*atribut di markup:

<a id="popover" data-trigger="hover">Popover</a>

Atau dengan opsi inisialisasi:

$("#popover").popover({ trigger: "hover" });

Ini DEMO .

João Silva
sumber
Terima kasih balasannya. Bagaimana cara menetapkan opsi pemicu ke kode ini? <script> $(function () { $("#popover").popover(); }); </script>
Muhambi
8
@Jake: Gunakan $("#popover").popover({ trigger: "hover" });.
João Silva
Terima kasih! untuk beberapa alasan saya perlu mengimplementasikan pemicu data dan inisialisasi JS.
Anthony
Adakah yang bisa membantu saya memahami mana yang merupakan pilihan yang lebih baik, inisialisasi JS atau atribut data? Bahkan jika saya menggunakan atribut data, saya masih harus memanggil $ ("# popover"). Popover (); dari JavaScript saya.
Bailey
@ Bailey Itu akan tergantung pada apa aturan pengkodean Anda dan jika Anda bekerja dengan standar pengkodean tertentu, dan kemudian preferensi pribadi. Melihat keduanya, saya lebih suka menargetkan opsi pemicu dalam fungsi popover (). Tampaknya lebih mudah dibaca oleh saya.
Coderhi
33

Saya ingin menambahkan itu untuk aksesibilitas, saya pikir Anda harus menambahkan pemicu fokus:

yaitu $("#popover").popover({ trigger: "hover focus" });

Calexo
sumber
Tidak ada klik untuk permintaan ini - lihat judul tulisan ini
Albuquerque Web Design
14

Jika Anda ingin mengarahkan popover itu sendiri, Anda juga harus menggunakan pemicu manual.

Inilah yang saya pikirkan: 

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')) // change $(this) to $(_this) 
                {
                    $(_this).popover('hide');
                }
            }
        }, 200);
    });
}
Johannes Ferner
sumber
6

Fungsionalitas, yang Anda jelaskan, dapat dengan mudah dicapai menggunakan tooltip Bootstrap.

<button id="example1" data-toggle="tooltip">Tooltip on left</button>

Kemudian panggil fungsi tooltip () untuk elemen tersebut.

$('#example1').tooltip();

http://getbootstrap.com/javascript/#tooltips

VforVitamin
sumber
1

Setelah mencoba beberapa jawaban ini dan menemukan bahwa mereka tidak menskala dengan baik dengan banyak tautan (misalnya jawaban yang diterima membutuhkan garis jquery untuk setiap tautan yang Anda miliki), saya menemukan cara yang membutuhkan kode minimal untuk dapat bekerja, dan tampaknya juga berfungsi dengan baik, setidaknya di Chrome.

Anda menambahkan baris ini untuk mengaktifkannya:

$('[data-toggle="popover"]').popover();

Dan pengaturan ini untuk tautan anchor Anda:

data-toggle="popover" data-trigger="hover"

Lihat beraksi di sini , saya menggunakan impor yang sama dengan jawaban yang diterima sehingga harus bekerja dengan baik pada proyek yang lebih lama.

Peter
sumber