Masquer automatiquement bootstrap liste

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

C'est important parce que dans un téléphone mobile ou une tablette lorsque l'utilisateur appuie sur un contrôle, la liste est affichée, et le focus reste sur le même contrôle, alors que l'utilisateur tape quelque chose, avec la liste y faire obstacle.

InformationsquelleAutor Gonzalo | 2013-01-25
  1. 35

    Vous devriez vraiment essayer et poster votre code avant de demander de l'aide. Cela fonctionne, mais il y a peut être une méthode plus efficace:

    JS:

    $('.pop').popover().click(function () {
    setTimeout(function () {
        $('.pop').popover('hide');
    }, 2000);
});

    HTML:

    <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/

    • Je ne pense pas, cela fonctionne parfaitement lorsque plusieurs liste des éléments sur la même page. Le problème est lors de la première liste s'ouvre, comme dans le code, il permet de masquer les autres. mais lorsque l'on ouvre et vous ouvre la seconde, les premiers temporisation s'exécute et va se fermer le deuxième immédiatement lors de l'ouverture du code est de masquer tous les popovers au bout de 2 seconde. J'ai fait face à cette situation.
    • Vous avez juste besoin d'ajouter une variable intermédiaire pointant vers votre original objet jQuery jsfiddle.net/franverona/zPdX9
    • Cela ne semble pas fonctionner très bien, pour un couple de raisons. 1) Ce n'est pas sur le vol stationnaire. 2) Lorsqu'il disparaît, vous devez cliquer une fois pour le réinitialiser, puis cliquez une deuxième fois pour l'activer. 3) Il ne reste pas en place alors que le curseur se déplace à l'intérieur de l'affichage de la popup.
    • la pensée de cette réponse est acceptée, il manque une information capitale!! vous devez ajouter l'option déclenchement lors de l'initialisation liste .. {déclencheur:"manuel"} .. sinon la force du poignet attache un événement onclick qui provoque l'émission de deux cliquez nécessaires après la première utilisation .. la suite est une solution proposée ....` $("#element").liste({déclencheur:"manuel"}).cliquez sur(function(){ var pop = $(this); pop.liste("afficher") pop.sur('montré.bs.liste',function(){ setTimeout(function(){pop.liste("cacher")},2200); }) })`
    • peut-être que ce n'était pas un sujet de préoccupation avec Bootstrap 2 ou 3. Êtes-vous référant à la méthode Bootstrap 4?
    • oui je parle de Bootstrap 4 ... et je suppose que vous avez raison, ce n'était pas un souci ... mais je suppose que mon commentaire peut servir pour les utilisateurs actuels de bootstrap 4

    InformationsquelleAutor isherwood
  2. 16

    La accepté de répondre fonctionne très bien, mais ici, c'est un plus bootstrap:

    Réponse originale à cette question

    $('.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 capitale!! vous devez ajouter l'option déclenchement lors de l'initialisation liste .. {déclencheur:"manuel"} .. sinon la force du poignet attache un événement onclick qui provoque l'émission de deux cliquez nécessaires après la première utilisation .. la suite est 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); 
  }) 
})
    • C'est super, mais après la liste est automatiquement fermé, il faut deux clics pour obtenir de l'ouvrir à nouveau. Je pense que la liste pense toujours que c'est ouvert, toute solution à cela?
    • oui j'ai aussi remarqué qu'il. La solution est de détruire la liste et réinitialiser. Je vais essayer de mettre à jour ma réponse.
    • Cette réponse manque une information capitale!! vous devez ajouter l'option déclenchement lors de l'initialisation liste .. {déclencheur:"manuel"} .. sinon la force du poignet attache un événement onclick qui provoque l'émission de deux cliquez nécessaires après la première utilisation .. la suite est 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); }) })
    InformationsquelleAutor Adrian Enriquez
  3. 3

    Vous pouvez également ajouter vos propres données d'attribut à votre 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 la liste disparaît après avoir indiqué le nombre de millisecondes spécifié dans les données d'expiration.

    • n'oubliez pas que "on" est mieux d'avoir le filtre afin de soutenir le changement de l'INTERFACE utilisateur - mon 2 cents de $(document).sur('montré.bs.liste', '[data-toggle="liste"][données d'expiration de]', function() { this_popover = $(this); setTimeout(function () { this_popover.liste('hide'); }, $(this).de données("timeout")); });
    InformationsquelleAutor Roel Vermeulen