ทำให้ Bootstrap Popover ปรากฏ / หายไปบน Hover แทนที่จะคลิก

181

ฉันกำลังสร้างเว็บไซต์ด้วย Bootstrap ของPopoverและฉันไม่สามารถหาวิธีที่จะทำให้ popover ปรากฏบน hover แทนที่จะคลิก

สิ่งที่ฉันต้องการจะทำก็คือให้มีป๊อปโอเวอร์ปรากฏขึ้นเมื่อมีคนเลื่อนเมาส์ไปที่ลิงค์แทนที่จะคลิกที่มันและเพื่อให้ป๊อปโอเวอร์หายไปเมื่อพวกเขาย้ายออกไป เอกสารบอกว่าเป็นไปได้โดยใช้ data data หรือ jquery ฉันค่อนข้างจะทำมันด้วย jquery เนื่องจากฉันมีป๊อปอัปหลายแห่ง

javascript jquery twitter-bootstrap

— Muhambi
แหล่งที่มา

20

เคล็ดลับ: โฮเวอร์ดูดบนอุปกรณ์สัมผัส หากคุณต้องการให้แน่ใจว่าการใช้งานหน้าจอสัมผัสอย่าผูกฟังก์ชันการทำงานเพื่อเลื่อน

— Jørgen R

374

ตั้งค่าtriggerตัวเลือกของการ popover ไปhoverแทนclickซึ่งเป็นค่าเริ่มต้นหนึ่ง

สิ่งนี้สามารถทำได้โดยใช้data-*แอตทริบิวต์ทั้งในมาร์กอัป:

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

หรือด้วยตัวเลือกการเริ่มต้น:

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

นี่เป็นDEMO

— João Silva
แหล่งที่มา

ขอบคุณสำหรับการตอบกลับ. ฉันจะตั้งค่าตัวเลือกทริกเกอร์เป็นรหัสนี้ได้อย่างไร <script> $(function () { $("#popover").popover(); }); </script>

— Muhambi

8

@Jake: $("#popover").popover({ trigger: "hover" });ใช้

— João Silva

ขอบคุณ! ด้วยเหตุผลบางอย่างฉันจำเป็นต้องใช้ทั้ง data-trigger และการเริ่มต้น JS

— แอนโทนี่

ทุกคนสามารถช่วยฉันเข้าใจว่าเป็นตัวเลือกที่ดีกว่าการเริ่มต้น JS หรือคุณลักษณะข้อมูลหรือไม่ แม้ว่าฉันจะใช้ data-attributes ฉันยังคงต้องเรียก $ ("# popover") popover (); จาก JavaScript ของฉัน

— Bailey

@ Bailey มันจะขึ้นอยู่กับว่ากฎการเข้ารหัสของคุณคืออะไรและถ้าคุณกำลังทำงานกับมาตรฐานการเข้ารหัสเฉพาะใด ๆ และความชอบส่วนตัว เมื่อมองไปที่ทั้งสองฉันชอบการกำหนดเป้าหมายตัวเลือกทริกเกอร์ภายในฟังก์ชัน popover () ดูเหมือนจะอ่านได้มากขึ้นสำหรับฉัน

— Coderhi

33

ฉันต้องการเพิ่มสิ่งนั้นเพื่อความสะดวกในการเข้าถึงฉันคิดว่าคุณควรเพิ่มตัวกระตุ้นโฟกัส:

กล่าวคือ $("#popover").popover({ trigger: "hover focus" });

— Calexo
แหล่งที่มา

ไม่มีการคลิกสำหรับคำขอนี้ - ดูที่ชื่อของโพสต์นี้

— Albuquerque Web Design

14

หากคุณต้องการที่จะเลื่อนตัวป็อปโอเวอร์ตัวเองเช่นกันคุณต้องใช้ทริกเกอร์ด้วยตนเอง

นี่คือสิ่งที่ฉันมาด้วย:

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

— โยฮันเนสเฟิร์น
แหล่งที่มา

6

ฟังก์ชั่นที่คุณอธิบายสามารถทำได้อย่างง่ายดายโดยใช้เคล็ดลับเครื่องมือ Bootstrap

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

จากนั้นเรียกใช้ tooltip () ฟังก์ชั่นสำหรับองค์ประกอบ

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

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

— VforVitamin
แหล่งที่มา

1

หลังจากลองใช้คำตอบเหล่านี้สองสามข้อและพบว่าคำตอบเหล่านั้นมีขนาดไม่ใหญ่นัก (ตัวอย่างเช่นคำตอบที่ยอมรับต้องมี jquery สำหรับทุกลิงก์ที่คุณมี) ฉันเจอวิธีที่ต้องใช้รหัสน้อยที่สุดในการทำงานและ มันยังทำงานได้อย่างสมบูรณ์แบบอย่างน้อยใน Chrome

คุณเพิ่มบรรทัดนี้เพื่อเปิดใช้งาน:

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

และการตั้งค่าเหล่านี้ไปยังลิงค์สมองของคุณ:

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

ดูได้ที่นี่ฉันกำลังใช้การนำเข้าเหมือนกับคำตอบที่ยอมรับดังนั้นจึงควรใช้งานได้ดีกับโครงการเก่า

— จางไป
แหล่งที่มา