Tıklama yerine Fareyle Önyükleme Popover'in Görünmesini / Kaybolmasını Sağlayın

181

Bootstrap Popover ile bir web sitesi inşa ediyorum ve popover tıklayın yerine vurgulu görünmesini nasıl anlayamıyorum.

Tek yapmak istediğim, birisi bir bağlantıyı tıklamak yerine bir bağlantının üzerine geldiğinde bir popover'ın görünmesi ve dışarı çıktıklarında popover'ın kaybolması. Belgeler, data niteliğini veya jquery'yi kullanmanın mümkün olduğunu söylüyor. Birden fazla popoverim olduğundan jquery ile yapmayı tercih ederim.

javascript jquery twitter-bootstrap

— Muhambi
kaynak

20

İpucu: Fareyle üzerine gelindiğinde dokunma cihazlarını emer. Dokunmatik ekranlar için kullanılabilirlik sağlamak istiyorsanız, üzerine gelmek için işlevselliği bağlamayın.

— Jørgen R

374

Set triggeriçin popover seçeneği hoveryerine clickise, varsayılan bir.

Bu data-*, işaretlemedeki iki özellikten biri kullanılarak yapılabilir :

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

Veya bir başlatma seçeneğiyle:

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

İşte bir DEMO .

— João Silva
kaynak

Cevap için teşekkürler. Bu koda nasıl bir tetikleyici seçeneği ayarlayabilirim? <script> $(function () { $("#popover").popover(); }); </script>

— Muhambi

8

@Jake: Kullanın $("#popover").popover({ trigger: "hover" });.

— João Silva

Teşekkürler! nedense hem veri tetikleyici hem de JS başlatma uygulamak gerekiyordu.

— Anthony

Hangisi daha iyi seçenek, JS başlatma veya veri öznitelikleri olduğunu anlamam yardımcı olabilir mi? Veri özniteliklerini kullansam bile $ ("# popover"). Popover (); JavaScript'imden.

— Bailey

@Bailey Kodlama kurallarınızın ne olduğuna ve herhangi bir özel kodlama standardı ile çalışıp çalışmadığınıza ve daha sonra kişisel tercihinize bağlı olacaktır. İkisine baktığımda, popover () işlevi içinde tetikleme seçeneğini hedeflemeyi tercih ediyorum. Bana daha okunaklı geliyor.

— Coderhi

33

Erişilebilirlik için bunu eklemek istiyorum, sanırım odak tetikleyici eklemelisiniz:

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

— Calexo
kaynak

Bu istek için hiçbir tıklama yok - yazının bu başlığına bakın

— Albuquerque Web Design

14

Popover'ın kendisini de gezdirmek istiyorsanız manuel tetikleyici kullanmanız gerekir.

Ben geldi budur:

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
kaynak

6

Açıkladığınız işlevsellik, Bootstrap araç ipucu kullanılarak kolayca elde edilebilir.

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

Ardından öğe için ipucu () işlevini çağırın.

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

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

— VforVitamin
kaynak

1

Bu cevaplardan birkaçını denedikten ve birden fazla bağlantıyla iyi ölçeklenmediklerini bulduktan sonra (örneğin, kabul edilen cevap, sahip olduğunuz her bağlantı için bir jquery satırı gerektirir), çalışmak için minimum kod gerektiren bir yolla karşılaştım ve en azından Chrome'da da mükemmel çalışıyor gibi görünüyor.

Etkinleştirmek için bu satırı ekleyin:

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

Ve bu bağlantılar bağlantı bağlantılarınıza:

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

Burada iş başında bakın , kabul edilen cevapla aynı ithalatı kullanıyorum, bu yüzden eski projelerde iyi çalışmalı.

— Peter
kaynak