Auf der Suche nach einer Mouseover-Funktion wie Stackoverflow

Ich liebe die Hover-Effekte von StackOverflow.

Bildbeschreibung hier eingeben

Ich möchte ähnliche Funktionen in meiner Web-Anwendung verwenden. Kann mich jemand darüber informieren? Was diese Funktion heißt? Gibt es dafür eine Bibliothek? Ich habe jQuery Tooltip verwendet, aber ich war nicht beeindruckt von diesem.

Derzeit bin ich mit overLib in meiner Anwendung, die ziemlich alt ist.

Bearbeiten: Beeindruckt klingt hier nicht gut, ich möchte einfach nur Mouseover-Effekt wie Stackoverflow haben .

5 Solutions collect form web for “Auf der Suche nach einer Mouseover-Funktion wie Stackoverflow”

Ich weiß, das ist alt, aber ich war auf der Suche nach der gleichen Sache, und … Falls jemand etwas will, das eigentlich wie StackOverflows Tag Tooltips aussieht … und warum wärst du das nicht?

Demo: http://jsbin.com/korehubi/10

Code: http://jsbin.com/korehubi/10/edit

Sorgfältig reproduziert durch den StackOverflow-Code.

Verwendung:

<div class="firstElement">The thing to hover over.</div> <div class="coolTip" id="firstElement">This is the tooltip content.</div> 
  • Weisen Sie dem Tooltip div die Klasse "coolTip" zu.
  • Außerdem weisen Sie ihm eine ID zu, die mit einer Klasse übereinstimmt, die auf dem Element eingestellt ist, das Sie überfahren möchten.
  • Führen Sie coolTips() auf Seite laden aus.

Beachten Sie den Inhalt des Tooltip div im obigen Beispiel ist nur zu demonstrieren Nutzung. Sie müssen HTML-Tags für den Tooltip-Inhalt verwenden, wie im Jsbin-Link gezeigt, um StackOverflow-esque formatierte Tooltips zu haben. Du brauchst auch den dort gezeigten CSS.

Genießen 🙂

Update: Jetzt prüft, ob die Tooltip aus dem Fensterrand auslaufen würde, und animiert von rechts oder unten stattdessen in diesen Fällen.

Die neue jQuery UI Tooltip ist ganz gut: http://jqueryui.com/tooltip/#custom-style

Die Animation ist steuerbar, die Tooltip ist stilabel, man kann die StackOverflow wie Tooltips ziemlich imitieren.

Beachten Sie, dass ich Ihnen das Beispiel "Custom Style" verknüpft habe. Es zeigt Ihnen, wie Sie benutzerdefinierte Styles für die Tooltip machen.

Auch das zeigt standardmäßig das title-Attribut eines Elements an. Es gibt ein Beispiel: http://jqueryui.com/tooltip/#custom-content wo benutzerdefinierte Inhalte auf unterschiedliche Weise eingestellt sind, um Ihnen ein paar Optionen zu zeigen.

Ich bin mir nicht sicher, welche Funktion fehlt.

EDIT: Die benutzerdefinierte Content-Demo wird auf der Beispielseite abgehört, check es in voller Seitenansicht: http://view.jqueryui.com/menubar/demos/tooltip/custom-content.html

EDIT2: Neue Lösung

Wenn ich Anton's Antwort betrachtete, dachte ich, dass dies richtig gemacht werden könnte, indem ich das Tooltip-Div in das Original-Div hineinbringe und Hoverintent einführte. Auch eine kleine Desinfektion des Codes war in Ordnung. Überprüfen Sie: http://jsbin.com/anegip/2/edit

http://jsbin.com/anegip/3/edit

Mit einem kleinen Design ist es das, was du willst.

Bitte schauen Sie sich dieses Plugin an. Mit diesem können Sie den gleichen Effekt wie der Stackoverflow erreichen. Klick hier

Machen Sie es einfach mit (link) . Fügen Sie html hinzu und fertigen Sie CSS entsprechend Ihrem Bedarf besonders an.

Du kannst .animate wie diese Demo verwenden, die ich in jsfiddel gemacht habe http://jsfiddle.net/qJ8NB/1/

Füge einfach ein paar nette CSS auf die Div und du könntest es so aussehen wie SO.

Hier ist ein UPDATE http://jsfiddle.net/qJ8NB/11/

Lassen Sie uns Javascript Schönheit und nützlich machen.