web-dev-qa-db-fra.com

Masquage automatique bootstrap popover

Je veux masquer automatiquement les popovers Bootstrap après quelques secondes. Lorsque l'utilisateur survole un contrôle, le popover doit être affiché, mais si l'utilisateur ne déplace pas le pointeur de la souris, ce popover doit être masqué automatiquement après quelques secondes.

C'est important car dans un téléphone mobile ou une tablette, lorsque l'utilisateur appuie sur un contrôle, le popover s'affiche et le focus reste sur le même contrôle pendant que l'utilisateur tape quelque chose, le popover le gênant.

javascriptjquerytwitter-bootstrappopover
17
Gonzalo

Vous devriez vraiment essayer et publier votre code avant de demander de l'aide. Cela fonctionne, bien qu'il puisse y avoir une méthode plus efficace:

$('.pop').popover().click(function () {
    setTimeout(function () {
        $('.pop').popover('hide');
    }, 2000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<span class="pop" data-original-title="My popover" data-content="Isn't it great?">Click me</span>

http://jsfiddle.net/isherwood/Bqq7C/27/

35
isherwood

La réponse acceptée fonctionne très bien, mais voici une approche plus bootstrap:

Réponse originale

$('.pop').on('shown.bs.popover', function () {
    var $pop = $(this);
    setTimeout(function () {
        $pop.popover('hide');
    }, 2000);
});

Mise à jour de limplash

Cette réponse manque une information clé !! vous devez ajouter l'option de déclenchement lors de l'initialisation du popover .. {trigger: "manual"} .. sinon le bootstraps attache un événement onclick auquel provoque le problème de deux clics requis après la première utilisation .. la suite devrait être une solution proposée

$("#element").popover({ trigger:"manual" }).click(function() { 
  var pop = $(this); 
  pop.popover("show") 
  pop.on('shown.bs.popover',function() { 
   setTimeout(function() {
    pop.popover("hide")}, 2200); 
  }) 
})
17
Adrian Enriquez

Vous pouvez également ajouter votre propre nouvel attribut de données à vos popovers en tant que tel:

$('[data-toggle="popover"][data-timeout]').on('shown.bs.popover', function() {
    this_popover = $(this);
    setTimeout(function () {
        this_popover.popover('hide');
    }, $(this).data("timeout"));
});

Maintenant, vous pouvez utiliser

<span 
    data-toggle="popover" 
    data-timeout="2000" 
    title="A title" 
    data-content="Some explanatory text">
    Your text
</span>

et le popover disparaît après avoir affiché le nombre de millisecondes que vous avez spécifié dans data-timeout.

3
Roel Vermeulen