ToolTip direkt im Gutenberg Editor erstellen
- Lege eine neue Seite/Beitrag an oder öffne einen bereits bestehenden
- Öffne ein HTML Element im Gutenberg Editor
- Füge den unten stehenden Code ein
Der Code funktioniert nur mit CSS. Es ist kein Javascript nötig.
- Unter .wptooltip kannst Du die Farbe des Links einstellen
- Unter span.wptooltip:hover span.tip kannst Du die Hintergrundfarbe des Tooltips einstellen sowie die Schriftfarbe oder ob dieser oben oder unten (wenn unten dann margin-top: -140 px; entfernen) angezeigt werden soll und noch einiges anderes.
- Vorteil: Du hast die völlige Kontrolle über Deinen Tooltip, benötigst kein weiteres Plugin und kannst diesen beliebig erweitern. Viel Spaß!
// Farbe des Links einstellen
<style>
.wptooltip {
display: inline-table;
color: #00B900;
}
// Tooltip vorerst verbergen und nur bei hover anzeigen
.tip {
display: None;
}
//Tooltip Einstellungen bei hover
span.wptooltip:hover span.tip {
display: Inline-Block;
display: Table-Caption;
position: absolute;
z-index: 10000;
background-color: rgba(100, 180, 80);
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
padding: 10px;
margin-top: -140px;
border-radius: 2px;
font-size: 14px;
color: #FFFFFF;
}
</style>
//Dein Text für den Link und für den Tooltip <br> = Zeilenumbruch
<p>
Deine Frage auf Gutefrage.net:
<span class="wptooltip">Ist dies ein Tooltip?<span class="tip">Ja, dies ist ein<br>anpassbarer Tooltip direkt<br>im Gutenberg Editor,<br>ohne Plugin!</span></span>
</p>