Frage zum Wiki-Artikel „Tooltips_mit_CSS“

[Matthias Scharwies]

Servus!

„Das wird im Fazit: Tooltip, Touch und Zugänglichkeit auch erwähnt!“

„Fazit“ finde ich da öfter. Aber keinen Hinweis darauf, daß so ein Tooltip nicht (ganz) sichtbar sein kann, weil es auf irgend einer Seite aus dem sichtbaren Bereich liegt. Das, meine ich, gehört zu den allgemeinen Hinweisen, neben Screenreader usw.

Das gilt ja erst beim #Ein-_und_Ausblenden:

Fazit: Durch ein zusätzliches Element haben Sie einen Tooltip, den Sie nach eigenen Wünschen frei gestalten können. Nur in der Platzierung müssen Sie beachten, dass der Tooltip auch direkt am Rand platziert sein könnte und sich deshalb (teilweise) außerhalb des Viewports befindet.

Information

Nach heutigem Stand kann man nur mit HTML und CSS nicht steuern, ob ein Tooltip außerhalb des Viewport - und damit nicht sichtbar - dargestellt wird. Mit JavaScript und der Intersection Observer API könnte man berechnen, ob sich ein Element im sichtbaren Bereich befindet.

Das W3C entwickelt dafür derzeit das CSS Anchor Positioning Module, mit dem für diesen Fall alternative Formatierungen angegeben werden können.

„Im oben erwähnten Abschnitt werden Fußnoten mit CSS empfohlen.“

Fußnoten? Ja, die könnte man auch verwenden. Aber sie passen nicht so gut zu einer Seite, die sich wenig an einer Gestaltug „wie auf Papier“ festmachen lassen möchte. „Suppe ißt man auch nicht so gut mit einer Gabel“.

Ja, das ist Geschmackssache.

„Du meinst ::marker ?“

::marker würde dem Zugriff dienen, würde der eine oder andere Browser im Inspektor ein #marker anzeigen. Also: sowohl als auch.

Ich weiß immer noch nicht, was dein #marker ist. Bezogen auf details gibt es eben den Text-Inhalt, um den man leider ein div legen muss; ein summary und den marker, der als Pseudoelement angezeigt, aber eben nur über den ::marker-Selektor in manchen Browsern gestylt werden kann.

Und: details wäre etwas, das meiner Idee immerhin, von der Gestaltung her, nahe kommt. Gemischt mit Effekten wie in Menüs mit automatischem Auf- und Zuklappen, nur eben mit dem Zusatzangebot an Infos anstelle von Menüpunkten. Die Idee war also ungefähr

<info-box>
  <header>Teaser</header>
  <info-area>„da guggst du!“</info-area>
</info-box>

Und info-area rollt sich, über dem anderen Seiteninhalt liegend, auf wenn man auf den header zeigt. Aber height verträgt sich nicht mit transition, wenn die Höhe der Box nicht festgenagelt wird. Ja, es gibt da ein Beispiel. Aber … na, das wird jetzt doch zu kompliziert.

Jetzt habe ich deinen Plan verstanden. Und gaube, dass mehrere dieser „Akkordeons“ die Aufgabe erfüllen würden. Gib ihnen eine feste Höhe und veränder' die beim Aufklappen:

details  {
 height: 5em;
}

details[open]  {
  height: 100%
  z-index: 99;
}

ungetestet.

---

Das mit den cq-Einheiten hat damit aber nicht viel zu tun.

Genau!

Gut, damit herumgespielt habe ich. Nur kriege ich einfach nicht heraus, wann da „100cqb“ nicht mit „100vb“ identisch ist. Meist ist es nämlich so (wenn nicht gar „mit 110vb“?).

Ich verspreche dir, dass ich Anfang August ein Tutorial zu Container Queries schreibe.

Egal, wie ich da container-type und/oder contain, mit und ohne Grid oder Flexbox, gesetzt und kombiniert habe. Meist, also manchmal waren „100cqi“ doch wieder „nur“ die Breite des Elements, in das eingebettet wurde.

Nein, nicht kombinieren!

Da gibt es eine klare Trennung von Technologien:

1. media Queries fragen Features ab; z.B. die Bildschirmbreite

@media (min-width: 30em) and (max-width: 60em) { 
  body {
    width: 100%
    padding: 1em;
  }
}
@media print and (min-width: 60em) { 
    max-width: 60em;
    margin: 1em auto;
}

2. Mit Grid Layout kannst du beliebig viele Elemente einer Ebene flexibel positionieren, ohne dich mit Pixeln und festen Breiten etc. beschäftigen zu müssen.

@media (min-width: 40em) {
  body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
  }
}

article {
  grid-column: 1 / -1; 
  grid-row: span 2; 
}

#news {
  grid-column: span 2;
}

Kindeskinder sind davon nicht betroffen; da müsst du ein neues Grid aufmachen. Und hier kommt die Nr. 3 ins Spiel:

3. Container Queries Wenn die Kindeemente keine Bilder, sondern eben „cards“ mit h3, Bild und Text sind, kannst du diese Kindeskindelemente jetzt formatieren, ohne den Umweg über die Media queries zu gehen.

Mehr im August!

Herzliche Grüße

Matthias Scharwies