HTMLElement.title — Eigenschaft · JavaScript-Referenz

Signatur

HTMLElement.title

Beschreibung

Die Eigenschaft HTMLElement.title spiegelt das HTML-Attribut title wider. Sie enthält einen Hinweistext, den Browser in der Regel als kleines Tooltip-Popup anzeigen, wenn der Mauszeiger eine Weile über dem Element bleibt. Beim Lesen erhältst du den aktuellen Attributwert als Zeichenkette. Beim Schreiben wird das Attribut title gesetzt bzw. überschrieben.

Typische Einsatzfälle sind kurze Zusatzinfos zu Icons, Abkürzungen (<abbr>), gekürzten Texten oder deaktivierten Schaltflächen. Außerdem hat title bei manchen Elementen eine eigene Bedeutung: Bei <link rel="stylesheet"> benennt es alternative Stylesheets, bei <input pattern> ergänzt es die Validierungsmeldung, und bei <iframe> dient es als zugänglicher Name.

Fehlt das Attribut, liefert die Eigenschaft einen leeren String "" und nicht null. Hat ein Element selbst keinen Titel, zeigen Browser den title des nächsten Vorfahren an. Ein Kind erbt den Tooltip also vom Elternelement. Mit einem leeren title="" lässt sich diese Vererbung unterbinden.

Nicht verwechseln mit document.title: Diese Eigenschaft steuert den Titel des Dokuments im Browser-Tab und gehört zum <title>-Element im <head>.

Parameter

Name	Typ	Default	Beschreibung
$value	string	""	Beim Setzen: der neue Titeltext. Andere Werte werden in einen String umgewandelt (`null` wird zu `"null"`).

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des title-Attributs oder "", wenn das Attribut fehlt.

Beispiele

Titel lesen und setzen

// HTML: <button id="save" title="Speichern">💾</button>
const btn = document.querySelector('#save');
console.log(btn.title);

btn.title = 'Änderungen speichern (Strg+S)';
console.log(btn.getAttribute('title'));

Speichern Änderungen speichern (Strg+S)

Vollständigen Text bei gekürzten Tabellenzellen als Tooltip zeigen

// Zellen mit CSS text-overflow: ellipsis bekommen den vollen Text als Tooltip
document.querySelectorAll('td.truncate').forEach((cell) => {
  if (cell.scrollWidth > cell.clientWidth) {
    cell.title = cell.textContent.trim();
  } else {
    cell.removeAttribute('title');
  }
});

Fehlendes Attribut ergibt leeren String

const div = document.createElement('div');
console.log(JSON.stringify(div.title));
console.log(div.hasAttribute('title'));

div.title = 'Hinweis';
console.log(div.outerHTML);

"" false <div title="Hinweis"></div>

Dynamischer Status-Tooltip für einen deaktivierten Button

const submit = document.querySelector('#submit');
const terms = document.querySelector('#terms');

const update = () => {
  submit.disabled = !terms.checked;
  submit.title = submit.disabled
    ? 'Bitte zuerst die AGB akzeptieren'
    : '';
};

terms.addEventListener('change', update);
update();

// Wichtig · Fallstricke

Barrierefreiheit: Auf Touch-Geräten erscheinen Tooltips nicht, und über die Tastatur sind sie meist nicht erreichbar. Auch Screenreader lesen sie nicht zuverlässig vor. Wichtige Informationen gehören deshalb nicht allein in title. Verwende sichtbaren Text, aria-label oder aria-describedby.
Vererbung: Kindelemente ohne eigenen Titel zeigen den Tooltip des Vorfahren an. Mit el.title = '' wird dieser Tooltip unterdrückt. removeAttribute('title') stellt die Vererbung wieder her.
Zeilenumbrüche: Ein \n im String erzeugt in den meisten Browsern einen mehrzeiligen Tooltip.
Kein Styling: Aussehen und Anzeigeverzögerung des nativen Tooltips legt der Browser fest und lassen sich nicht per CSS ändern. Für eigene Tooltips eignen sich z. B. die Popover-API oder eigene Elemente.
Sicherheit: Der Wert wird als reiner Text behandelt und nicht als HTML interpretiert. Deshalb besteht beim Setzen kein XSS-Risiko, anders als bei innerHTML.
Die Eigenschaft wird in allen Browsern unterstützt. Bei SVG-Elementen gibt es sie nicht. Dort übernimmt ein <title>-Kindelement diese Aufgabe.

Siehe auch

Document.title HTMLElement.translate HTMLElement.style HTMLElement.dir HTMLElement.hidden