web-dev-qa-db-fra.com

Comment faire bootstrap info-bulle reste visible jusqu'à ce que le lien soit cliqué

J'ai un lien que je vais utiliser comme notification lorsqu'un utilisateur a une nouvelle notification, je vais informer l'utilisateur en affichant une info-bulle (Twitter bootstrap info-bulle). Ce que je veux réaliser est, cette info-bulle doit rester visible jusqu'à ce que l'utilisateur clique sur le lien. une fois que l'utilisateur clique sur le lien, l'info-bulle doit détruire. c'est ce que j'ai jusqu'à présent, http://jsfiddle.net/testtracker/QsYPv/

HTML

<p><a href="#" rel="tooltip" data-original-title="you have 2 notifications">Notification</a>.</p>​

Javascript

$('p a').tooltip({placement: 'bottom'}).tooltip('show');​

Ce qui se passe là-bas est, l'infobulle reste visible jusqu'à ce que vous la survoliez, et prend son comportement par défaut (afficher au survol) une fois que vous la survolez.

J'espère avoir donné des informations appropriées et effacé ce que je veux faire.

javascripttwitter-bootstraptooltip
37
vikas devde

Voici la solution http://jsfiddle.net/testtracker/QsYPv/8/

Ajout de l'option "trigger"

$('p a').tooltip({placement: 'bottom',trigger: 'manual'}).tooltip('show');

puis, avec cette ligne

$('p a').on('click',function(){$(this).tooltip('destroy');});

détruire l'infobulle au clic.

68
vikas devde

Vous pouvez ajouter une variable pour déclencher l'événement mouseleave pour afficher à nouveau l'info-bulle, puis comme vous l'avez dit dans votre commentaire, détruisez simplement l'info-bulle lorsque vous cliquez dessus, afin qu'elle ne s'affiche pas lorsque vous passez à nouveau la souris:

var clickedNotify = false;
$('p a').tooltip({placement: 'bottom'}).tooltip('show');
$('p a').mouseleave(function() { if (!clickedNotify) { $('p a').tooltip({placement: 'bottom'}).tooltip('show'); } });
$('p a').click(function() { clickedNotify = true; $(this).tooltip('destroy'); });

De cette façon, l'infobulle est toujours affichée, même après une souris, jusqu'à ce que le lien soit cliqué. Une fois le lien cliqué, l'info-bulle est détruite et ne génère toujours pas d'erreurs javascript sur la page de mouseleave.

4
Nathan Wheeler