jQuery-UI Tooltips - Wie korrekt ausrichten vertikal zentriert auf der Maus?

Update: Noch auf der Suche für eine gangbare Lösung, aber meine Antwort unten, es kann Ihnen helfen, oder Ihnen eine Idee geben. Es funktioniert für eine bestimmte Auflösung.

Ich bin mit dem jQuery UI plugin tooltips aber ich
m Probleme beim positionieren tooltip, wie ich will.

Ich würde es gerne zentriert auf die Maus vertikal, aber nur auf der linken Seite des Elements in Frage. Ich glaube, ich bin Formulierung das richtig, aber ich werde Ihnen zeigen, ein Bild von dem, was ich meine.

(das ist, was es sollte tun)

http://prntscr.com/v2yqi

Wie Sie sehen können, in meinem Beispiel ist es die Zentrierung senkrecht auf dem element selbst, nicht die Maus.

Wenn es sich bewegen könnte, mit der Maus (vertikal tracking nur) wäre das perfekt. Nicht sicher, ob dies möglich ist, mit diesem plugin. Ich weiß nicht wirklich verstehen, Ihre Positionierung API.

Und hier ist ein 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>";
        }
      }
    });
});

Ich wirklich zu schätzen jede Einsicht, die Sie mir geben können auf dieser. Vielen Dank im Voraus.

InformationsquelleAutor Dustin Perolio | 2013-03-05
  1. 8

    Landete immer es die Arbeit durch hinzufügen einer benutzerdefinierten Klasse, tracking und position: fixed:

    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;
}

    Ist, und den aktualisierten JSFiddle

    Hoffentlich hilft jemand anderes aus irgendwann.

    • Hmm... akzeptieren auch Noch weitere Antworten/Ideen eigentlich... Diese Lösung funktioniert nicht mit allen Auflösungen, da es fixiert und der linke Abstand ist abhängig von deiner Auflösung.
    InformationsquelleAutor Dustin Perolio
  2. 2

    Können Sie track: true, aber ich denke, dass jQuery tooltip ist nicht sehr user-freundlich und flexibel =(
    Haben Sie versucht,qTip2 ?

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

    • Ja, einfach track hinzufügen: true funktioniert nicht, wie ich es gerne hätte. Es ist ziemlich glitchy, und würde ablenken den Benutzer, der versucht, den text zu Lesen. Ich möchte wirklich, dies zu erreichen, mit der jQuery-UI-tooltip-da bin ich schon mit dem UI-plugin für andere Dinge.
    • Sie können versuchen, mit qTip2 und jQuery UI zusammen =)
    InformationsquelleAutor Steely Wing
Schreibe einen Kommentar