Erkundung der Möglichkeiten von Details und Summary Elementen

Wir haben schon früher erwähnt, wie großartig die Elemente <details> und <summary> sind. Sie eignen sich hervorragend, um schnell Akkordeons zu erstellen, die für Touch-, Maus- und Tastatureingaben zugänglich sind.

<details> und <summary> können sogar dazu verwendet werden, GIFs abzuspielen/anzuhalten! Klicken Sie auf die Pause-Schaltfläche oben rechts auf diesem Bild, um es in Aktion zu sehen

Schick, oder? Aber was können diese Elemente noch tun? Lange Zeit dachte ich bei details nur an eine Möglichkeit, Akkordeons zu erstellen. Aber neulich dachte ich ein wenig darüber nach, und das erste, was mir einfiel, war, dass wir vielleicht bessere Fußnoten damit erstellen könnten.

So erstellen wir heute typischerweise Fußnoten nur mit HTML

Wenn Sie auf einen Link in einem Absatz klicken, werden Sie zum Seitenende geleitet, wo die Beschreibung der Fußnote steht. Und das machen wir, indem wir IDs von Elementen hin und her verlinken. Aber! Es gibt jQuery-Plugins wie BigFoot, die es Ihnen ermöglichen, Fußnoten Inline zu haben.

Hier ist das gleiche Beispiel mit dem BigFoot-Skript und jQuery

Schick, oder? BigFoot nimmt unser zugängliches Markup, entfernt all diesen Link-Kram und wirft es direkt Inline als kleinen Button und Tooltip.

Aber was, wenn wir <details> und <summary> verwenden könnten, um dieses jQuery und das einfache HTML für unsere Fußnoten zu ersetzen? Nun, leider können wir das nicht. Wenn Sie versuchen, eines dieser Elemente in einem <p>-Tag zu platzieren, rendern Browser diese Elemente außerhalb des <p>-Elements

Mist! Das ist ärgerlich, aber ich verstehe irgendwie, warum es so funktioniert. Es wäre großartig, wenn wir die Komplexität all dieser Links und die schlechte Erfahrung des Auf- und Abspringens auf der Seite ersetzen könnten. Aber das können wir nicht.

Nun, wenn wir das nicht können, wofür können wir dann <details> und <summary> verwenden? Das hat mich zum Nachdenken gebracht... was ist mit Tooltips? Ja! Das können wir absolut tun. Nehmen wir an, wir haben Markup wie dieses, das das angezeigte Datum erweitert

Ziemlich Standard, das haben wir schon mal gesehen. Aber jetzt kommen wir zum Styling, was der interessante Teil ist. Zuerst müssen wir uns um das <details>-Element kümmern

details {
  border-radius: 3px;
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.15s background linear;
}

details:hover,
details:focus {
  background: #d4d1ec;
}

Dies ermöglicht uns, die Informationen innerhalb unseres Details-Elements absolut zu positionieren, aber es lässt den Tooltip auch wie einen Button aussehen, wenn man darauf klickt, mit dem Hintergrund. Als nächstes können wir den Standardpfeil für das summary-Element rückgängig machen, indem wir dies tun

summary {
  background: url("https://assets.codepen.io/14179/Info.svg") 11px 11.5px no-repeat;
  list-style: none;
  padding: 10px;
  padding-left: 33px;
}

Und schließlich müssen wir den Absatz, den wir innerhalb des details-Elements haben, absolut positionieren. Und ein winziges kleines Dreieck erstellen, das nach oben zum Rest des Tooltips zeigt

details p {
  cursor: auto;
  background: #eee;
  padding: 15px;
  width: 250px;
  position: absolute;
  left: 0;
  top: 35px;
  border-radius: 4px;
  right: 0;
}

// Tiny triangle that points up
details p:before {
  content: "";
  border-bottom: 12px solid #eee;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  height: 0;
  left: 10px;
  position: absolute;
  top: -10px;
  width: 0;
}

Was zu etwas wie diesem führt. Stellen Sie sicher, dass Sie auf den Tooltip klicken, um die darunter erscheinende Beschreibung zu sehen

Eine nette Sache, die wir hier tun können, um die Dinge ein wenig zu verfeinern, ist, eine Animation hinzuzufügen, wenn der Tooltip geöffnet ist

details[open] p {
  animation: animateDown 0.2s linear forwards;
}

@keyframes animateDown {
  0% {
    opacity: 0;
    transform: translatey(-15px);
  }
  100% {
    opacity: 1;
    transform: translatey(0);
  }
}

Und da haben Sie es! Wenn Sie auf den Tooltip klicken, öffnet er sich, und wenn Sie ihn mit der Tabulatortaste auswählen und die Leertaste drücken, öffnet er sich ebenfalls.

Aber wir können das noch *etwas* weiter treiben. Etwas, das wir wahrscheinlich nicht wollen, ist eine Menge dieser Tooltips, die überall aufgehen. Wenn wir Tooltips stark nutzen, kann das sehr umständlich und visuell ablenkend werden. Was wir tun müssen, ist, den Tooltip zu schließen, wenn wir außerhalb davon klicken. Und das können wir mit etwas leichtem JavaScript machen

const tooltip = document.querySelector(".tooltip");

document.addEventListener("click", function (e) {
  var insideTooltip = tooltip.contains(e.target);

  if (!insideTooltip) {
    tooltip.removeAttribute("open");
  }
});

Jetzt schließt er sich, wenn Sie außerhalb des Tooltips klicken. Nett!

---

Die Elemente <details> und <summary> können nicht alles, aber sie können sicherlich viele praktische Dinge tun – und ich glaube, dass diese Kombination von Elementen noch viel mehr kann. Wir müssen sie nur finden. Tatsächlich finden Sie hier weitere großartige Beiträge zu diesem Thema.