javascript - 클릭 대신 마우스 오버시 Bootstrap Popover가 나타나기 / 사라짐





jquery twitter-bootstrap (5)


설명 된 기능은 부트 스트랩 툴팁을 사용하여 쉽게 구현할 수 있습니다.

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

그런 다음 요소에 대한 tooltip () 함수를 호출하십시오.

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

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

나는 Bootstrap의 Popover 있는 웹 사이트를 구축하고 있는데, 대신 popover가 클릭 대신 표시되도록하는 방법을 알아낼 수 없습니다.

내가하고 싶은 일은 누군가가 링크를 클릭하는 대신 링크를 가리키면 사라지고, 사라질 때 사라지는 팝업이 나타납니다. 설명서에는 데이터 속성 또는 jquery를 사용하여 가능하다고 나와 있습니다. 나는 popovers가 여러 개 있기 때문에 jquery로 처리하는 편이 낫다.




popover의 trigger 옵션을 Popover clickclick 대신 hoverhover 가도록 설정하십시오.

이는 마크 업에서 data-* 속성을 사용하여 수행 할 수 있습니다.

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

또는 초기화 옵션을 사용합니다.

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

여기에 DEMO 있습니다.




접근성을 위해 추가하고 싶습니다. 포커스 트리거를 추가해야한다고 생각합니다.

$("#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);
    });
}



Firebase는 WebSockets 을 사용하여 서버가 클라이언트에 데이터를 " push "수있게합니다. 모든 브라우저 버전이 아직 WebSocket을 지원하지 않기 때문에 브라우저에 대한 긴 폴링으로 다시 넘어갑니다.

서버에서 작동하는 방법에 대한 구현 세부 사항은 독점적이며 정교합니다. SO 질문의 범위를 넘어서 책을 쓸 정도로 충분합니다. 이 서비스는 set (), push () 또는 update ()가 호출 될 때마다 (또는 REST에 해당하는) 언제든지 청취자에게 변경 사항을 알리도록 설계되었습니다.

브라우저가 웹 소켓을 사용하는지 여부에 관계없이 클라이언트가 서버에 반복적으로 접속하지 않으므로 "폴링 시간"이 없습니다. 긴 폴링은 변경 사항이 발생했는지 확인하기 위해 반복적으로 폴링하지 않고 데이터 변경이 발생하기를 기다리는 것을 의미합니다. 튜토리얼이나 실시간 예제를 통해 알 수 있듯이 데이터 변경 사항은 수천 밀리 초 만에 모든 클라이언트에 동기화되므로 구성 할 필요가 없습니다.





javascript jquery twitter-bootstrap