Der Tooltipp ist ein nicht-modaler Dialog und verhält sich mehrheitlich analog zum Flyout, bekommt aber keinen Fokus. Gegenüber dem nativen Tooltipp erscheint er bei Mouseover weniger verzögert. Zudem erscheint er ebenfalls bei Tastatur-Fokus.
Nicht-modale Dialoge werden mit Hilfe der Popover API behandelt. Alle gängigen Browser unterstützen diese.
Ich gehe zudem davon aus, dass du das HTML und das Javascript gemäss der Dialoge-Anleitung eingrichtet hast. Insbesondere die dialog.js übernimmt hier einen massgeblichen Anteil.
Der Tooltipp wird über die CSS-Klasse tooltip behandelt. Der Style lehnt sich teilweise am Flyout an.
dialog.tooltip {
min-width: 8rem;
margin: 0;
padding: 0.4rem 0.8rem;
background-color: var(--default2-color);
box-shadow: var(--text-color) 0 0 0.4rem;
overflow: visible;
opacity: 0;
&:popover-open {
transition: opacity 0.1s ease-in 0.2s;
opacity: 1;
}
&::after {
box-shadow: color-mix(in oklab, var(--text-color), transparent 50%) -0.2rem 0.2rem 0.2rem;
border: 0.8rem solid transparent;
border-color: transparent transparent var(--default2-color) var(--default2-color);
transform-origin: 0 0;
transform: rotate(135deg);
left: 2.5rem;
content: '';
position: absolute;
width: 0;
height: 0;
margin-top: -0.3rem;
box-sizing: border-box;
display: block;
}
&[data-dialog-arrow='bottom-left']::after {
left: 0.1rem;
bottom: -1.4rem;
transform: rotate(315deg);
}
&[data-dialog-arrow='top-right']::after {
left: auto;
right: -1.4rem;
}
&[data-dialog-arrow='bottom-right']::after {
left: auto;
right: 0.8rem;
bottom: -1.4rem;
transform: rotate(315deg);
}
div {
max-height: 5lh;
overflow: hidden;
}
}
Alle weiteren Styles können vom Standard-Dialog geerbt werden.
Das HTML zum Tooltipp-Dialog wird automatisch generiert.
<dialog class="tooltip">
<div">Das ist ein Tooltipp.</div>
</dialog>
Die den Tooltipp aufrufende Elemente sind mit einem title-Attribut zu versehen. Dessen Inhalt wird im Tooltipp dargestellt.
<button title="Das ist ein Tooltipp.">Tooltipp anzeigen</button>
Damit ist bereits alles Notwendige getan. Alles Weitere übernimmt die dialog.js. Wir können den Tooltipp-Dialog also gleich testen.
Du hast es geschafft. Abonniere meine Benachrichtigungen, um weitere News und Anleitungen von mir zu erhalten.