Tooltip selber bauen
Pit
- javascript
Hi,
nachdem ich schon einige Tooltip-Plugins nutze und mehr oder eher weniger glücklich damit bin und nachdem ich auch schon für kleinere Tooltips selber welche gebaut habe, frage ich mal in die Runde, wie Ihr Tooltips realisiert (wenn Ihr das denn macht).
Ich möchte grad nicht über die Sinnhaftigleit von Tooltips diskutieren, das habe ich für mich bereits entschieden.
Ich habe einen Block, den ich gerne mit kurzem delay einblenden möchte und nutze bereits jquery und ui.
.tooltip steht per default auf display:none.
Wie würdet Ihr den einblenden (bei mouseover). Wie gesagt, leicht zeitverzögert und was mir wichtig wäre, dass der Block rechts neben dem auslösenden Element eingeblendet wird, bzw. wenn der Platz nicht ausreicht, dann links neben dem auslösenden Element.
<div class="tooltip">
<span id="a1_2">
<div class="container">
<header>Header</header>
<div>Titel:</div> <div>Titel</div>
<div>Zeile1</div> <div>Zeile</div>
<div>Zeile2</div> <div>Zeile</div>
<div>Zeile3</div> <div>Zeile</div>
<div>Zeile4</div> <div>Zeile</div>
<footer>footer</footer>
</div>
</span>
</div>
Pit
@@Pit
wie Ihr Tooltips realisiert (wenn Ihr das denn macht).
☞ Inclusive Components ☞ Tooltips & Toggletips
LLAP 🖖
Hallo Pit,
welchen Sinn hat denn dein (falsch) verschachteltes
span
?Viele Grüße
Hi Robert,
hast recht, kann raus. Aber inwiefern falasch verschachtelt?
Pit
Hallo
welchen Sinn hat denn dein (falsch) verschachteltes
span
?hast recht, kann raus.
Aber inwiefern falsch verschachtelt?
Das span
als solches ist ein Inlineelement und darf seinerseits keine Blockelemente sondern nur Phrasing Content beïnhalten.
Tschö, Auge
Hallo,
ich habe mal einen fiddle erstellt, in dem würde ich gerne bei mouseover einen Container als Tooltip anzeigen.
Mir gelingt das nicht.
Pit
@@Pit
ich habe mal einen fiddle erstellt, in dem würde ich gerne bei mouseover einen Container als Tooltip anzeigen.
Mir gelingt das nicht.
Ich habe kein mouseover. Mir gelingt das nicht, dein Tooltip zu sehen.
Wozu hatte ich dir verlinkt, wie man’s richtig macht?
LLAP 🖖
Hi Gunnar,
Ich habe kein mouseover. Mir gelingt das nicht, dein Tooltip zu sehen.
Soll ichs auf einen Klick umbauen? Das Problem bliebe dasselbe.
Wozu hatte ich dir verlinkt, wie man’s richtig macht?
Das habe ich mangels Englischkenntnisse nicht vertanden. 😟
Pit
@@Pit
Ich habe kein mouseover. Mir gelingt das nicht, dein Tooltip zu sehen.
Soll ichs auf einen Klick umbauen? Das Problem bliebe dasselbe.
Nicht ganz. Auf Touchgeräten sollten Clicks funktionieren.
Tastaturbedienung: immer noch Fehlanzeige, wenn das Bedienelement nicht per Tastatur erreichbar ist. Weil es ein div
ist.
Merke: Niemals nicht-interaktive Elemente als Target für click
-Events vorsehen. Für sowas sind button
s zu verwenden
Wozu hatte ich dir verlinkt, wie man’s richtig macht?
Das habe ich mangels Englischkenntnisse nicht vertanden. 😟
Das ist aber schlechte Voraussetzungen für einen Webentwickler.
Zumindes den Codepen darin hättest du dir mal ansehen können.
LLAP 🖖
Gunnar, mind your bedside - oops, sorry - deskside manners! ;-)
Was Pickering da beschreibt, ist durchaus anspruchsvoll.
Abgesehen davon sind Englischkenntnisse keine Existenzvoraussetzung. Selbst in England nicht (oder warum liest man so viele Erklärungstexte zu lie/lie/lay oder their/there oder it's/its oder site/sight oder oder...). Und in SelfHTML, der DEUTSCHEN REFERENZ, schon gar nicht. Aber das Thema ist ja nicht neu...
Wäre Pickering wohl einverstanden mit einer deutschen Übersetzung seines Blogs im Self Wiki? Natürlich mit demütiger Reverenz zu ihm?
Rolf
Hi Rolf,
danke.
Was Pickering da beschreibt, ist durchaus anspruchsvoll.
Abgesehen davon sind Englischkenntnisse keine Existenzvoraussetzung. Selbst in England nicht (oder warum liest man so viele Erklärungstexte zu lie/lie/lay oder their/there oder it's/its oder site/sight oder oder...). Und in SelfHTML, der DEUTSCHEN REFERENZ, schon gar nicht. Aber das Thema ist ja nicht neu...
Ich glaube, mir würde es vom Anspruch her schon in Deutsch nicht ganz leicht fallen, aber ich würds versuchen. So habe ich nach kurzer Durchsicht das Handtuch geworfen.
Pit
Hallo Rolf B,
Wäre Pickering wohl einverstanden mit einer deutschen Übersetzung seines Blogs im Self Wiki? Natürlich mit demütiger Reverenz zu ihm?
Gute Idee, soll @Gunnar Bittersmann ruhig mal fragen.
Bis demnächst
Matthias
Hallo Matthias,
und dass ich mir da ein <I> gekauft habe, ist mir durchaus klar…
Rolf
Ich verstehe bei englisch auch nur Bahnhof, bin aber mit Gunnar einer Meinung, daß das anschauen des Codepens dich weiter bringen kann. Kopier einfach mal den Code und schau was bei dir rauskommt. Manches wird auch verständlicher wenn du das ganz im Browser (Inspektor) untersuchst: da gehen doch des öfteren Lichter auf -> aahhh so funktioniert das.