클릭 대신 부트 스트랩 팝 오버가 호버에서 나타나거나 사라지도록하십시오.

181

Bootstrap의 Popover 로 웹 사이트를 구축 중이며 클릭 대신 팝 오버가 호버에 표시되는 방법을 알 수 없습니다.

내가하고 싶은 것은 누군가 링크를 클릭하는 대신 링크 위로 마우스를 가져 가면 팝 오버가 나타나고 이동하면 팝 오버가 사라지게하는 것입니다. 설명서에는 data 속성 또는 jquery를 사용할 수 있다고 나와 있습니다. 여러 팝 오버가 있기 때문에 jquery로 훨씬 더하고 싶습니다.

javascript jquery twitter-bootstrap

— 무 하비
소스

20

팁 : 호버는 터치 장치를 빨아들입니다. 터치 스크린의 유용성을 보장하려면 기능을 호버링하지 마십시오.

— Jørgen R

374

설정 trigger에 팝 오버의 옵션 hover대신 click은 IS, 기본 하나를.

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

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

또는 초기화 옵션으로 :

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

여기 데모가 있습니다.

— 주앙 실바
소스

답장을 보내 주셔서 감사합니다. 이 코드에 트리거 옵션을 어떻게 설정합니까? <script> $(function () { $("#popover").popover(); }); </script>

— Muhambi

8

@Jake : 사용 $("#popover").popover({ trigger: "hover" });.

— João Silva

감사! 어떤 이유로 데이터 트리거와 JS 초기화를 모두 구현해야했습니다.

— Anthony

누구든지 더 나은 옵션, JS 초기화 또는 데이터 속성을 이해하도록 도울 수 있습니까? 데이터 속성을 사용하더라도 여전히 $ ( "# popover"). popover (); 내 JavaScript에서.

— Bailey

@Bailey 코딩 규칙이 무엇인지, 특정 코딩 표준을 사용하는 경우 개인 선호도에 따라 다릅니다. 두 가지를 살펴보면 popover () 함수 내에서 트리거 옵션을 타겟팅하는 것을 선호합니다. 더 읽기 쉬운 것 같습니다.

— Coderhi

33

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

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

— 칼 렉소
소스

이 요청에 대한 클릭이 없습니다

— 앨버 커키 웹 디자인

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"

여기에서 실제로 볼 수 있습니다 . 허용 된 답변과 동일한 수입품을 사용하고 있으므로 오래된 프로젝트에서 잘 작동합니다.

— 베드로
소스