Twitter Bootstrap Twipsy - Planant au-dessus de l'info-bulle

Je suis en train d'utiliser Twitter Bootstrap Twipsy comme un planant info-bulle avec un lien à l'intérieur de la bulle d'aide.

Le problème est que lorsque le curseur de la souris quitte l'élément est alors l'info-bulle disparaît et les utilisateurs ne peuvent pas atteindre le lien à l'intérieur de la bulle d'aide (jetez un oeil à la Démo et de voir que vous ne pouvez pas mettre votre curseur de la souris sur le twipsy bulle noire comme il disparaît).

Est-il un moyen de le réparer?

Grâce.

Le Problème est: Quand dois l'info-bulle disparaître, si elle inclut un lien. Une façon est de désactiver le eventOut complètement
mais si je désactive le eventOut cas, alors il ne va pas disparaître pour toujours, et je ne veux disparaître si le curseur de la souris n'est pas au-dessus de l'élément balisé ou au-dessus de la bulle d'aide lui-même.
Je pense que c'est un grand changement pour le cadre / js extension. Je vous recommande de créer une nouvelle question / RFE sur le site du projet: github.com/twitter/bootstrap/issues. Il y a beaucoup plus de gens qui travaillent avec bootstrap, qui connaissent le code, comment il fonctionne et comment l'étendre.
Im ayant un problème similaire. Quand je firebugged il, j'ai remarqué que lorsque vous unhover de la twipsy les icônes, il est transparent laissant son divs sur le dessus des choses makng l'icône par défaut de curson au lieu du pointeur.

OriginalL'auteur Aviram | 2011-11-06

  1. 7

    Je trouve qu'il est difficile de croire que l'un des créateurs de bootstrap vous a dit que ce n'était pas possible, comme c'est le plus certainement est - Il faut juste un peu de bricolage.

    Voici la solution en coffeescript et jquery, testé et de travail:

    timer = null
el = null
el2 = null
$('[rel=twipsy]').live
  mouseenter: ->
    $('.twipsy').remove()
    $(this).twipsy('show')
  , mouseleave: ->
    el = $(this)
    timer = setTimeout((-> 
      el.twipsy('hide')
      $('body .twipsy:last-child').remove()
    ), 10)

$('.twipsy').live
  mouseenter: ->
    clearTimeout(timer)
    el2 = $(this)
    el2.css 'z-index', 1000 if el2.hasClass 'in'
  , mouseleave: ->
    timer = setTimeout((->
      el.twipsy('hide')
      el2.css 'z-index', 1
      $('body .twipsy:last-child').remove()
    ), 10)

    Si vous travaillez sur une application qui est lourde de la circulation, a travailler dans les anciens navigateurs ou de vieux ordinateurs, ou sinon, la performance est très autonome, je vous recommande fortement de roulement de votre propre solution ici, comme à l'aide d'un mal de vivre des gestionnaires n'est pas vraiment une bonne idée. Mais pour quelque chose de petit/normal, cela fonctionne bien. J'ai trouvé un petit bug étrange qui peut arriver (même si c'est rare), si vous passez d'une manière particulière. Le problème de chevauchement est résolu par le z-index de la manipulation.

    Si vous avez besoin c'est de vanille dans le javascript, il suffit de le coller dans la "essayez coffeescript" de la console à http://coffeescript.org/ et compiler pour vous.

    OriginalL'auteur Jeff Escalante

  2. 2

    Je pense que ce que vous avez vraiment besoin ici était Twitter Popovers.

    http://twitter.github.com/bootstrap/javascript.html#popovers

    Les info-bulles sont utilisées uniquement pour l'affichage de certaines informations(c'est pourquoi il est appelé un outil de "pointe").
    Où que, si vous avez besoin d'interactions de l'utilisateur, vous devez utiliser les Popovers.

    Maintenant, voici une question peut se poser sur la convivialité point que pourquoi pour augmenter d'un utilisateur, cliquez sur si nous pouvons obtenir le même à l'aide info-bulle en vol stationnaire. Mais cela donne à l'utilisateur le contrôle du temps qu'il veut pour faire de l'interaction. Donc, à mon avis, il améliore la facilité d'utilisation. Vous ne pouvez pas tellthe utilisateur à cliquer sur un lien dans un délai de 2 secondes(délai d'attente) ou il ira loin. Il n'est pas bon pour la convivialité

    J'apprécie le travail effectué pour cette réponse, et si la réponse est correcte, la solution n'est pas.

    Espère que je me suis fait clair.

    OriginalL'auteur Mandeep Jain

  3. 1

    Si vous lisez mon commentaire ci-dessus et semblent avoir le même problème, c'est ce qui a fonctionné pour moi.

    Vous pouvez définir un retard sur l'animation d'environ 300ms laquelle il mentionne également le faire dans la documentation.

    Il ne serait pas utile, car il va disparaître après la suite. L'un des créateurs de Twitter Bootstrap toolkit m'a dit que ce que je voulais faire est impossible à l'heure actuelle.

    OriginalL'auteur Rooster

  4. 1

    Vous pouvez définir le déclenchement de la twipsy 'manuel' et ensuite lier les événements tels que "mouseenter" pour une fonction qui utilise une minuterie d'attendre quelques secondes avant la fermeture. Essayez ceci:

    $(element).twipsy({
    trigger:'manual'
});
$(element).bind('mouseover',function(){
    $(element).twipsy('show');
    if ( $(element).data('timerIsGoing') !== true ) {
        $(element).data('timerIsGoing',true);
        setTimeout(function(){
            $(element).twipsy('hide');
        }, 2000);
    }
});

    Cela donnera à l'utilisateur de 2 secondes pour cliquer sur le lien.

    Aussi, je viens de remarquer votre problème avec le fait qu'il pourrait y avoir d'autres info-bulles à proximité qui se chevauchent. Sur mouseover Vous pourriez déclencher un événement personnalisé qui masque tous les autres actifs info-bulles... juste une pensée

    OriginalL'auteur andrhamm

  5. 0

    J'ai eu le même problème, mais j'ai eu les deux jQuery.js et Prototype.js chargé. La prévention prototype.js pour charger résout le problème.

    OriginalL'auteur PBR