Faça o popover do Bootstrap aparecer / desaparecer ao passar o mouse em vez de clicar

181

Estou construindo um site com o Popover do Bootstrap e não consigo descobrir como fazer o popover aparecer ao passar o mouse em vez de clicar.

Tudo o que eu quero fazer é que uma popover apareça quando alguém passa o mouse sobre um link em vez de clicar nele e a popover desapareça quando se afasta. A documentação diz que é possível usar o atributo de dados ou o jquery. Eu prefiro fazê-lo com jquery, pois tenho vários popovers.

javascript jquery twitter-bootstrap Muhambi
fonte
20
Dica: Passe o mouse é uma porcaria nos dispositivos de toque. Se você deseja garantir a usabilidade das telas sensíveis ao toque, não vincule a funcionalidade ao passar o mouse.
Jørgen R

Respostas:

374

Defina a triggeropção do popover para em hovervez de click, que é o padrão .

Isso pode ser feito usando qualquer um dos data-*atributos na marcação:

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

Ou com uma opção de inicialização:

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

Aqui está uma demonstração .

João Silva
fonte
Obrigado pela resposta. Como defino uma opção de gatilho para esse código? <script> $(function () { $("#popover").popover(); }); </script>
Muhambi 9/09/12
8
@ Jake: Use $("#popover").popover({ trigger: "hover" });.
João Silva
Obrigado! por algum motivo, eu precisei implementar o acionador de dados e a inicialização do JS.
Anthony
Alguém pode me ajudar a entender qual é a melhor opção, inicialização JS ou atributos de dados? Mesmo se eu usar atributos de dados, ainda teria que chamar $ ("# popover"). Popover (); do meu JavaScript.
Bailey
@ Bailey Depende de quais são suas regras de codificação e se você está trabalhando com algum padrão de codificação específico e, em seguida, de preferência pessoal. Olhando para os dois, prefiro direcionar a opção de gatilho na função popover (). Parece mais legível para mim.
Coderhi 9/04
33

Gostaria de acrescentar que, para acessibilidade, acho que você deve adicionar o gatilho de foco:

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

Calexo
fonte
Não clique nesta solicitação - veja este título da publicação
Albuquerque Web Design
14

Se você deseja passar o mouse sobre o popover também, use um gatilho manual.

Isto é o que eu vim com: 

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);
    });
}
Johannes Ferner
fonte
6

A funcionalidade, que você descreveu, pode ser facilmente alcançada usando a dica de ferramenta Bootstrap.

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

Em seguida, chame a função tooltip () para o elemento.

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

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

VforVitamin
fonte
1

Depois de tentar algumas dessas respostas e descobrir que elas não se adaptam bem a vários links (por exemplo, a resposta aceita requer uma linha de jquery para cada link que você possui), deparei-me com uma maneira que requer código mínimo para funcionar e também parece funcionar perfeitamente, pelo menos no Chrome.

Você adiciona esta linha para ativá-la:

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

E essas configurações para seus links de ancoragem:

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

Veja em ação aqui , estou usando as mesmas importações que a resposta aceita, para que funcione bem em projetos mais antigos.

Peter
fonte