HTML-Formular Eingabe Titel Styling

Question

Ich bin dabei, ein Formular für meine Website zu erstellen, und ich benötige einige QuickInfos zu meinen Eingabefeldern, die erklären, was der Benutzer in dieses Feld eingeben soll. Ich habe nach Wegen gesucht, um das title-Attribut sowie mehrere Möglichkeiten mit "span" und anderen Tags zu stylen, aber nichts scheint zu funktionieren. Einige der Methoden arbeiteten an Text, aber keiner von ihnen arbeitete an einem Eingabefeld.

Gibt es eine Möglichkeit, solche Tooltips für Eingabefelder zu erstellen? Je einfacher, desto besser.

Answer 1

Mehrere Möglichkeiten, dies zu tun, kommt JQuery UI zum Beispiel mit einer Art und Weise dieses (https://jqueryui.com/tooltip/)

oder man könnte ein tun verwenden als Tooltip und löst sie auf schweben (oder wann immer) über js, diese Beispiel: this example von Eric Kidd ist ziemlich ähnlich.

Was Sie Ihre Tooltip schweben tun müssen, grundsätzlich angezeigt ist:

1. Stil ein Etikett angezeigt werden wo auch immer Sie es wollen (dies Ihr tooltipbox sein wird)
2. definieren .is aktive Klasse, die das Etikett versteckt, wenn es nicht zu Ihrem Formular-Eingang angeschlossen ist

3. Auslöser die Klasse auf schweben, zum Beispiel wie diese

   $(".form").mouseenter(handlerIn).mouseleave(handlerOut); 
   
   function handlerIn() { 
   this.addClass("is-active"); 
   } 
   
   function handlerOut() { 
   this.removeClass("is-active"); 
   }