|
|||
Tooltip der einzelne Tabellezellen unter der Tabelle anzeigen
Morgen,
ich habe eine Tooltip-Lösung, welche mir in den einzelnen Zellen die entsprechenden Tooltips anzeigt und würde jetzt gerne auf eine Lösung gehen, welche mir die Tooltips unter der Tabelle in einem festen Bereich anzeigt. Zum einen beim Mouseover und beim Klicken. Beim googlen fand ich immer nur den Tooltip rund um die Zellen. Hinweis: Ich will kein Java verwenden! |
Sponsored Links |
|
|||
Du kannst auch kein Java im Browser verwenden, du könntest eventuell JavaScript verwenden. JavaScript hat mit Java so viel zu tun wie Britney Spears mit Metallica. Beide machen Musik, da hören sich die Gemeinsamkeiten aber auch schon auf.
Wenn du eine Interaktion bei Klicken und bei Mausover haben willst wirst du um die Verwendung von Javascript nicht herum kommen. Dafür ist JS nämlich da. Es gibt ein paar "Tricks" wie man auch dynamisch Inhalte ohne JS anzeigen kann, die sind aber sehr limitiert und funktionieren nur bei einem bestimmten Markup. Bei einer Tabelle ist dies aber wahrscheinlich nicht gegeben. |
Sponsored Links |
|
|||
OK... das mit Java und JavaScript habe ich verstanden aber die Variante mit dem Klicken ohne JavaScript ist möglich: https://bit01.de/demo/demo-clickable-tooltip-css3/
Ziel ist jetzt nur, dass es unter der Tabelle angezeigt werden soll. |
|
|||
Wie gesagt, das geht nur mit fixem markup und auch fixer Position. Du kannst es mit der Methode also nur direkt dort anzeigen wo du klickst, nicht unterhalb der Tabelle. Dafür brauchst du dann Javascript.
|
|
|||
Ich habe mir jetzt mal weiter Gedanken gemacht und es gibt ja Selektoren:
Code:
div[class^='hover'] { color: blue; } div[class^='stuff'] { color: red; opacity: 0.0; } .hover1:hover ~ .stuff1 { opacity: 1.0; } .hover2:hover ~ .stuff2 { opacity: 1.0; } .hover3:hover ~ .stuff3 { opacity: 1.0; } |
|
|||
Wie oben schon geschrieben, das geht nur wenn dein HTML eine konkrete Struktur hat. Du kannst kein parent Element selektieren. Das funktioniert also nur wenn dein tooltip innerhalb der Tabelle ist.
Auch verstehe ich nicht warum du meinst 1000 hover Events definieren zu müssen? Du musst lediglich genau eines definieren welches dann automatisch für alle passenden Elemente aufgerufen wird. |
|
|||
Natürlich klappt das, du setzt den Text für den Tooltip zB via ein data-attribut auf die jeweilige Tabelle. und beim hovern liest du das Attribut aus und zeigst den Text an. Ist genau ein hover Event, auch wenn es 1000 unterschiedliche Texte gibt.
Gibt natürlich auch andere Methoden, aber um dir da weiterhelfen zu können kenne ich deine genauen Anforderungen und deinen HTML Aufbau zu wenig. Edit: Was ich empfehlen kann ist eine Tooltip Library zu nehmen, zB https://atomiks.github.io/tippyjs/ diese hier. Hier ZB ein beispiel (leider nur in code-form) für drei Elemente mit unterschiedlichem Tooltip: https://atomiks.github.io/tippyjs/v6...mplate-linking Der Tooltip wird einmal für alle buttons initialisiert: Code:
tippy('button', { content(reference) { const id = reference.getAttribute('data-template'); const template = document.getElementById(id); return template.innerHTML; }, allowHTML: true, }); Geändert von cloned (10.03.2021 um 17:46 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Bestimmte Zeilenlinien bei einer Tabelle anzeigen | taotao2 | CSS | 2 | 07.12.2020 15:03 |
externe Seite in Tabelle anzeigen | vipersgarden | CSS | 10 | 31.03.2009 13:38 |
geschachtelte Tabelle oder wie Master-Detail anzeigen? | tesa | (X)HTML | 5 | 22.03.2009 20:30 |
tabelle nur oberen rand anzeigen | bl3nder | CSS | 6 | 05.09.2007 11:47 |
bildinformationen bei klick anzeigen (tooltip) | FrashMan | CSS | 3 | 03.04.2007 14:24 |