Làm cho Bootstrap Popover xuất hiện / biến mất trên Hover thay vì Click

Tôi đang xây dựng một trang web với Popover của Bootstrap và tôi không thể tìm ra cách làm cho cửa sổ bật lên xuất hiện trên di chuột thay vì nhấp chuột.

Tất cả những gì tôi muốn làm là có một cửa sổ bật lên xuất hiện khi ai đó lướt qua một liên kết thay vì nhấp vào liên kết đó và để cửa sổ bật lên biến mất khi họ di chuyển đi. Tài liệu nói rằng có thể sử dụng thuộc tính dữ liệu hoặc jquery. Tôi thích làm điều đó hơn với jquery vì tôi có nhiều cửa sổ bật lên.

Đặt triggertùy chọn của popover để hoverthay click, đó là mặc định một.

Điều này có thể được thực hiện bằng cách sử dụng một trong hai data-*thuộc tính trong đánh dấu:

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

Hoặc với tùy chọn khởi tạo:

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

Đây là một DEMO .

Tôi muốn thêm điều đó cho khả năng truy cập, tôi nghĩ bạn nên thêm trình kích hoạt tiêu điểm:

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

Nếu bạn muốn di chuột lên chính nó, bạn phải sử dụng một kích hoạt thủ công.

Đây là những gì tôi đã đưa ra:

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

Bạn có thể dễ dàng đạt được chức năng, bằng cách sử dụng công cụ Bootstrap.

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

Sau đó gọi hàm tooltip () cho phần tử.

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

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

Sau khi thử một vài trong số những câu trả lời này và thấy chúng không có quy mô tốt với nhiều liên kết (ví dụ: câu trả lời được chấp nhận yêu cầu một dòng câu hỏi cho mỗi liên kết bạn có), tôi đã tìm thấy một cách yêu cầu mã tối thiểu để làm việc và nó cũng có vẻ hoạt động hoàn hảo, ít nhất là trên Chrome.

Bạn thêm dòng này để kích hoạt nó:

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

Và các cài đặt này cho các liên kết neo của bạn:

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

Hãy xem nó hoạt động ở đây , tôi đang sử dụng cùng một nhập khẩu như câu trả lời được chấp nhận để nó hoạt động tốt trên các dự án cũ.