zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Tooltip der einzelne Tabellezellen unter der Tabelle anzeigen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.03.2021, 07:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.03.2021
Beiträge: 7
suados befindet sich auf einem aufstrebenden Ast
Standard 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!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.03.2021, 09:01
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.136
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.03.2021, 10:59
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.03.2021
Beiträge: 7
suados befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 04.03.2021, 11:06
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.136
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 04.03.2021, 11:31
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.03.2021
Beiträge: 7
suados befindet sich auf einem aufstrebenden Ast
Standard

Ach sorry...ich benutze php ... könnte ich dann mit ID's arbeiten um die verschiedenen Container unten zu positionieren.
Mit Zitat antworten
  #6 (permalink)  
Alt 04.03.2021, 11:42
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.136
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Ja, da kannst du mit ID arbeiten. Wirst aber um JS nicht herum kommen denke ich.
Mit Zitat antworten
  #7 (permalink)  
Alt 10.03.2021, 14:14
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.03.2021
Beiträge: 7
suados befindet sich auf einem aufstrebenden Ast
Standard

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; }
Gibt es irgendeine Möglickkeit (ohne JavaScript) mit Hilfe von Wildcard, IDs oder ähnlichem auf genau ein Element zuzugreifen um nicht 1000 Hover-Events definieren zu müssen?
Mit Zitat antworten
  #8 (permalink)  
Alt 10.03.2021, 15:58
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.136
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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.
Mit Zitat antworten
  #9 (permalink)  
Alt 10.03.2021, 16:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.03.2021
Beiträge: 7
suados befindet sich auf einem aufstrebenden Ast
Standard

Das klappt leider nicht, da jedes Element, was angezeigt wird(zugehörig zu seiner "ID-Zahl") einen anderen Text enthalten soll!
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 10.03.2021, 16:41
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.136
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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,
});
und schon hat jeder <button> auf der Seite einen passenden Tooltip, jeder mit seinem eigenen Text.

Geändert von cloned (10.03.2021 um 16:46 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Bestimmte Zeilenlinien bei einer Tabelle anzeigen taotao2 CSS 2 07.12.2020 14:03
externe Seite in Tabelle anzeigen vipersgarden CSS 10 31.03.2009 12:38
geschachtelte Tabelle oder wie Master-Detail anzeigen? tesa (X)HTML 5 22.03.2009 19:30
tabelle nur oberen rand anzeigen bl3nder CSS 6 05.09.2007 10:47
bildinformationen bei klick anzeigen (tooltip) FrashMan CSS 3 03.04.2007 13:24


Alle Zeitangaben in WEZ +2. Es ist jetzt 13:38 Uhr.