J'utilise un popover Bootstrap pour créer une carte de survol affichant les informations de l'utilisateur, et je le déclenche au passage de la souris sur un bouton. Je veux garder ce popover actif pendant que le popover lui-même est survolé, mais il disparaît dès que l'utilisateur cesse de survoler le bouton. Comment puis-je faire ceci?
$('#example').popover({
html : true,
trigger : 'manual',
content : function() {
return '<div class="box">Popover</div>';
}
});
$(document).on('mouseover', '#example', function(){
$('#example').popover('show');
});
$(document).on('mouseleave', '#example', function(){
$('#example').popover('hide');
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<a href="#" id="example" class="btn btn-danger" rel="popover" >hover for popover</a>
jquery
twitter-bootstrap
popper.js
vikas devde
la source
la source
Réponses:
Testez avec l'extrait de code ci-dessous:
Petite modification (à partir de la solution fournie par vikas) pour convenir à mon cas d'utilisation.
la source
;dans votre seconde$(_this).popover("hide"). Mais merci, c'était si simple et propre!container: 'body'aux options car cela faisait bouger les cellules. Très bonne réponse!animation:falsepour corriger le scintillement - vérifiez le lien Plunker que j'ai ci-dessus. Cela fonctionne parfaitement pour moi.Je suis venu après une autre solution à cela ... voici le code
la source
animation: falsesinon le fait de déplacer la souris sur le lien à plusieurs reprises le fera ne pas fonctionner correctementVoici ma prise: http://jsfiddle.net/WojtekKruszewski/Zf3m7/22/
Parfois, en déplaçant la souris du déclencheur de popover vers le contenu de popover réel en diagonale , vous survolez les éléments ci-dessous. Je voulais gérer de telles situations - tant que vous atteignez le contenu popover avant le déclenchement du délai d'attente, vous êtes en sécurité (le popover ne disparaîtra pas). Cela nécessite une
delayoption.Ce hack remplace fondamentalement la
leavefonction Popover , mais appelle l'original (qui démarre le minuteur pour masquer le popover). Ensuite, il attache un auditeur unique auxmouseenteréléments de contenu popover.Si la souris entre dans le popover, la minuterie est effacée. Ensuite, il écoute
mouseleavele popover et s'il est déclenché, il appelle la fonction de congé d'origine afin de pouvoir démarrer le minuteur de masquage.la source
container = self.$tip;cette façon, le popover peut même être trouvé lorsque lacontainerpropriété est définie. Il y a un violon ici: jsfiddle.net/dennis_c/xJc65if (!thisTip.is(':visible'))avant d'appeler leoriginalShow()container: 'body',cette solution ne fonctionnera pas comme prévu. La variablecontainerdoit être remplacée parself.$tip. Vérifiez ma réponse pour plus de détails: stackoverflow.com/a/28731847/439427Je pense qu'une manière simple serait la suivante:
De cette façon, le popover est créé à l'intérieur de l'élément cible lui-même. Ainsi, lorsque vous déplacez votre souris sur le popover, elle se trouve toujours sur l'élément. Bootstrap 3.3.2 fonctionne bien avec cela. Une version plus ancienne peut avoir des problèmes avec l'animation, vous pouvez donc désactiver "animation: false"
la source
delay: { "hide": 400 }pour ajouter un délai avant de se cacher et cela fonctionne très bien! 👍J'ai utilisé le déclencheur défini sur
hoveret donné le conteneur défini sur le,#elementpuis j'ai finalement ajouté un emplacementboxpour leright.Cela devrait être votre configuration:
et
#examplecss doitposition:relative;vérifier le jsfiddle ci-dessous:https://jsfiddle.net/9qn6pw4p/1/
Édité
Ce violon a les deux liens qui fonctionnent sans problème http://jsfiddle.net/davidchase03/FQE57/4/
la source
contentoption, pour prendre le contenu du côté du serveur ... cela fonctionnera ou je dois faire un travail supplémentaire pour celaajaxdans le contenu, mais vous devez configurer pour que cela fonctionne ... veuillez cocher la bonne réponse si cela a résolu votreOP.. afin que d'autres puissent en profiterC'est ainsi que j'ai fait avec le popover bootstrap avec l'aide d'autres bits sur le net. Obtient dynamiquement le titre et le contenu de divers produits affichés sur le site. Chaque produit ou popover obtient un identifiant unique. Popover disparaîtra à la sortie du produit ($ this .pop) ou du popover. Timeout est utilisé où affichera le popover jusqu'à la sortie via le produit au lieu du popover.
la source
Voici une solution que j'ai imaginée qui semble bien fonctionner tout en vous permettant d'utiliser l'implémentation normale de Bootstrap pour activer tous les popovers.
Violon original: https://jsfiddle.net/eXpressive/hfear592/
Porté sur cette question:
la source
Je conviens que le meilleur moyen est d'utiliser celui donné par: David Chase , Cu Ly et d'autres que le moyen le plus simple de le faire est d'utiliser la
container: $(this)propriété comme suit:Je tiens à souligner ici que le popover dans ce cas héritera de toutes les propriétés de l'élément actuel . Ainsi, par exemple, si vous faites cela pour un
.btnélément (bootstrap), vous ne pourrez pas sélectionner de texte dans le popover . Je voulais juste enregistrer ça puisque j'ai passé pas mal de temps à me cogner la tête là-dessus.la source
La réponse de Vikas fonctionne parfaitement pour moi, ici j'ajoute également le support du délai (afficher / masquer).
Veuillez également faire attention, j'ai changé:
avec:
de sorte qu'il référence exactement à ce popover ouvert, et pas à un autre (puisque maintenant, à travers le délai, plus de 1 pourrait être ouvert en même temps)
la source
La réponse choisie fonctionne mais échouera si le popover est initialisé avec le
bodycomme conteneur.Une solution basée sur la réponse choisie est le code suivant qui doit être placé avant d'utiliser le popover.
Le changement est minime en utilisant
self.$tipau lieu de traverser le DOM en espérant que le popover soit toujours un frère de l'élément.la source
Même chose pour les info-bulles:
Pour moi, la solution suivante fonctionne car elle n'ajoute pas d'écouteurs d'événements à chaque 'mouseenter' et il est possible de revenir sur l'élément d'info-bulle qui maintient l'info-bulle en vie.
la source
Cette solution a bien fonctionné pour moi: (maintenant son pare-balles) ;-)
la source
la source
J'ai trouvé que le
mouseleavene se déclenche pas lorsque des choses étranges se produisent, comme le focus de la fenêtre change soudainement, puis l'utilisateur revient au navigateur. Dans des cas comme ça,mouseleavene se déclenchera jamais tant que le curseur ne passera pas et ne quittera pas l'élément.Cette solution que j'ai proposée repose sur
mouseenterl'windowobjet, elle disparaît donc lorsque la souris est déplacée ailleurs sur la page.Cela a été conçu pour fonctionner avec plusieurs éléments sur la page qui la déclencheront (comme dans un tableau).
la source
Il sera plus flexible avec
hover():la source
Facile :)
la source
J'ai récemment eu besoin de faire fonctionner cela avec KO et les solutions ci-dessus ne fonctionnaient pas bien en cas de retard d'affichage et de masquage. Ce qui suit devrait résoudre ce problème. Basé sur le fonctionnement des info-bulles de bootstrap. J'espère que cela aide quelqu'un.
la source
Ceci est mon code pour afficher les info-bulles de dynamique avec délai et chargé par ajax.
la source