클릭 대신 호버에 부트스트랩 팝업 표시/사라짐

클릭 대신 호버에 부트스트랩 팝업 표시/사라짐

부트스트랩의 팝업으로 웹사이트를 만들고 있는데 팝업을 클릭 대신 호버에 표시하는 방법을 알 수 없습니다.

제가 원하는 것은 누군가가 링크를 클릭하는 대신 링크를 누르면 팝업이 나타나고 그들이 이동할 때 팝업이 사라지도록 하는 것입니다.설명서에는 데이터 속성이나 jquery를 사용할 수 있다고 나와 있습니다.제가 여러 명의 팝오버가 있어서 차라리 jquery로 하는 게 낫습니다.

셋 더trigger대신 팝업 옵션click, 기본값입니다.

이 작업은 다음 중 하나를 사용하여 수행할 수 있습니다.data-*마크업의 속성:

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

또는 초기화 옵션이 있는 경우:

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

여기 데모가 있습니다.

접근성을 위해 추가하고 싶은데 포커스 트리거를 추가해야 할 것 같습니다.

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

팝오버 자체를 호버링하려면 수동 트리거를 사용해야 합니다.

이것이 제가 생각해낸 것입니다.

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

설명하신 대로 부트스트랩 툴팁을 사용하면 쉽게 기능을 사용할 수 있습니다.

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

그런 다음 요소에 대한 tooltip() 함수를 호출합니다.

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

http://getbootstrap.com/javascript/ #툴팁

이러한 답변 중 몇 가지를 시도해 본 결과 여러 링크에서 확장이 잘 되지 않는다는 것을 알게 되었습니다(예: 승인된 답변에는 모든 링크에 대한 jquery 줄이 필요함). 작동하기 위해 최소한의 코드가 필요한 방법을 발견했고, 적어도 크롬에서는 완벽하게 작동하는 것으로 보입니다.

이 행을 추가하여 활성화합니다.

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

앵커 링크에 대한 다음 설정:

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

여기에서 확인하세요, 저는 승인된 답변과 동일한 수입품을 사용하고 있기 때문에 오래된 프로젝트에서 잘 작동할 것입니다.

부트스트랩 버전 5.1부터

데이터 대신 data-bs-*를 사용해야 합니다.

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

언급URL : https://stackoverflow.com/questions/12343695/make-bootstrap-popover-appear-disappear-on-hover-instead-of-click