jQuery UI info-bulles - Comment positionner correctement centrée verticalement à la souris?

Mise à jour: Toujours à la recherche d'une solution viable, mais vérifier ma réponse ci-dessous, il peut vous aider ou vous donner une idée. Il travaille pour une résolution spécifique.

Je suis en utilisant le jQuery UI plugin info-bulles mais je
m de la difficulté de positionnement de l'info-bulle comme je le veux.

Je voudrais qu'elle soit centrée à la souris verticalement, mais juste à gauche de l'élément en question. Je crois que je suis un libellé correctement, mais je vais vous montrer une photo de ce que je veux dire.

(c'est ce que doit faire)

http://prntscr.com/v2yqi

Comme vous pouvez le voir dans mon exemple, c'est le centrage à la verticale de l'élément lui-même, pas la souris.

Si elle pouvait le déplacer avec la souris (à la verticale de suivi uniquement) ce serait parfait. Vous ne savez pas si c'est possible avec ce plugin. Je ne comprends pas vraiment leur le positionnement de l'API.

Et voici un JSFiddle.

  $(function() {
    $( document ).tooltip({
      items: ".entry",
      position: { my: "center", at: "left" },
      content: function() {
        var element = $( this );
        if ( ( element.is( ".entry" ) ) ) {
          return "<div class='hi'>This is a very nice entry! It's so pretty and I feel     like I can touch it. This is just random filler text to give you the idea..</div>";
        }
      }
    });
});

J'apprécie vraiment aucune information vous pouvez me donner sur ce. Merci à l'avance.

OriginalL'auteur Dustin Perolio | 2013-03-05

  1. 8

    Finit par l'obtenir de travail par l'ajout d'une classe personnalisée, un suivi et une position: fixe:

    Javascript:

    $(function () {
      $(document).tooltip({
          items: ".entry",
          position: {
              my: "right bottom+50"
          },
          tooltipClass: "entry-tooltip-positioner",
          track: true,
          content: function () {
              var element = $(this);
              if ((element.is(".entry"))) {
                  return "<div class='hi'>This is a very nice entry! It's    so pretty and I feel like I can touch it. This is just random filler text.</div>";
              }
          }
      });
  });

    CSS:

    .entry {
    position: relative;
    right: -200px;
    width: 500px;
}
.entry-tooltip-positioner {
    position: fixed !important;
    left: -130px !important;
}

    Et la mise à jour JSFiddle

    J'espère que cela aide quelqu'un d'autre de temps en temps.

    Hmm... en acceptant plus de réponses/idées en fait... Cette solution ne fonctionne pas avec toutes les résolutions car il est fixe et la gauche de la distance dépend de la résolution de votre écran.

    OriginalL'auteur Dustin Perolio

  2. 2

    Vous pouvez utiliser track: true, mais je pense que jQuery tooltip n'est pas très convivial et flexible =(
    Avez-vous essayé qTip2 ?

    http://jsfiddle.net/5XWaB/2/

    Ouais, simplement en ajoutant de piste: le vrai ne fonctionne pas comme je le voudrais. C'est plutôt glitch, et serait de distraire l'utilisateur d'essayer de lire le texte. J'aimerais vraiment y parvenir avec jQuery UI bulle d'aide car je suis déjà à l'aide de l'INTERFACE utilisateur plugin pour d'autres choses.
    Vous pouvez essayer d'utiliser qTip2 et jQuery UI ensemble =)

    OriginalL'auteur Steely Wing