HTML/Attribute/data-*

Mit data-Attributen (Custom Data Attributes) haben Sie die Möglichkeit, Elementen eigene Attribute mitzugeben, die dann per Script ausgewertet oder mit CSS genutzt werden können. In diesen Attributen können Sie Informationen, die nicht visuell präsentiert werden sollen, zur Verfügung stellen.

Anders als Mikroformate sind data-Attribute interne Angaben und werden von Suchmaschinen nicht ausgewertet. Sie können beliebig viele data-Attribute definieren; diese müssen nur mit data- beginnen und aus Kleinbuchstaben bestehen.

erlaubte Werte
default-Wert
erlaubt in	allen Elementen
Browsersupport	Details bei caniuse.com: {{{caniuse}}}

Beispiel

<article
  id="neue-Elemente"
  data-columns="3"
  data-index-number="12314"
  data-parent="html5">
...
</article>

Empfehlung: Sie können data-Attribute mit der JavaScript-Methode getAttribute auslesen.

Weblinks

• W3C: custom-data-attribute
• deutschsprachige Einführung drweb.de

Anwendungsbeispiel

Beispiel ansehen …

<p>Viele Leute verwenden für einfache Sachverhalte einen komplizierten 
  <span class="tooltip" tabindex="0" 
        data-tooltip="Ausdruck, der durch ein Fachgebiet bestimmt wird">Fachbegriff</span>,
  den man erst einmal nachschlagen muss.</p>
<p>Mit einem 
  <span class="tooltip" tabindex="0" 
        data-tooltip="kleines Pop-up-Fenster in Anwendungsprogrammen oder Webseiten">Tooltip</span>
  haben Sie die Erklärung gleich zur Verfügung.</p>

Data-Attribute auslesen

mit JavaScript

Das Auslesen von data-Attributen geht sehr einfach. Entweder Sie lesen das Attribut mit getAttribute aus oder sie verwenden das eigens dafür geschaffene dataset.

Beispiel

var wort = document.getElementById('fachbegriff');
 
var erklaerung = wort.dataset.tooltip;

Beachten Sie: Mit Bindestrich zusammengesetzte data-Attribute werden in JavaScript zu camelCase.

mit CSS

Beispiel ansehen …

  .tooltip {
    position: relative;
    color: #3983ab;
  }
  .tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 130%;
    left: 20%;
    background: #3983ab;
    padding: 0.2em 0.4em;
    color: #dfac20;
    border-radius: 0.3em;
    white-space: nowrap;
    opacity: 0;
    transition: all 0.3s;
  }

Werden die Elemente der Klasse tooltip mit dem Mauszeiger berührt oder mit der Tastatur fokussiert, werden die Pseudoelemente ::after und ::before eingeblendet. Der Inhalt wird durch die attr-Funktion mit dem data-Attribut tooltip gefüllt.