javascript/jquery responsive tooltip mit Schließen-Taste

Question

Ich möchte Tooltip verwenden, wenn ein Textfeld auf meiner responsive Webseite fokussiert wird und Tooltip sollte verschwinden, wenn auf Unschärfe.

Jeder mir sagen, welche javascript/Jquery-Bibliothek ist für diesen Zweck am besten, unten sind meine Anforderungen?

1. Tooltip muss ansprechen, so dass auf kleinen Bildschirmen z.B. Mobilgeräte sollte es an der richtigen Stelle erscheinen.

2. Dort sollte ich Knopf auf Tooltip schließen, so dass, wenn es Störungen auf mobilen Geräten zu schaffen, sollte es geschlossen werden.

Answer 1

Optionen neben Bootstrap

Opentip ziemlich geringes Gewicht aussieht, leistungsfähig und konfigurierbar.

Tippedjs sieht gut aus und gut dokumentiert.

ToolTipster sieht ziemlich gut entwickelt und dokumentiert auch.

jQuery UI würde sicherlich auch die Rechnung passen.

Vorsichtshinweis. Im Allgemeinen ist es bei der Integration von Bibliotheken wie diesen für ein kleines bisschen Funktionalität gut, mit der am weitesten verbreiteten, getesteten und dokumentierten Wahl zu gehen. Manchmal finden Sie sich ohne Antworten auf einen seltsamen Fehler, wenn Sie brandneue und nicht dokumentierte Software verwenden.

Wenn Bootstrap OK ist

Bootstrap verfügt über eine gut getestet und einfache Bibliothek von verschiedenen gemeinsamen JavaScript enabled view components zu verwenden.

Sie können ihre tooltips here finden.

Ihre JavaScript-Komponenten enthalten normalerweise ein wenig extra Markup, aber die Zeit, die Sie sparen, wenn Sie versuchen, es selbst zu implementieren, ist es sehr wert. Für Ihre Tooltips:

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button> 

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button> 

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button> 

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button> 

Beachten Sie, wie sie auf die Schaltfläche angeben hat einen Tooltip mit dem data-toggle="tooltip" Attribute? Die title="Your tooltip text here" wird dann der Text für Ihre QuickInfo.

Dies sollte auch Ihren Anforderungen entsprechen, da jQuery aktiviert ist.