Tooltip-Box 1

Im August 2025 verwendetes Template: cmsimplexh-172-tooltip1b. Das ist mit einer klassischen Box in Richtung des Wortes. Ich habe noch etwas an der Hintergrund-Farbe der Box eingestellt.

Zuerst wird im Template in der stylesheet.css dieser Code (gefunden bei www.w3schools.com/css/css_tooltip.asp) eingefügt. Dort gibt es weitere Erklärungen.

/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #0057b0;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;

/* Position the tooltip */
position: absolute;
z-index: 1;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}

Im zweiten Schritt wird ein Wort (hier: Rechts) eingefügt und die 'class tooltip' im Quellcode des Editors aktiviert.
Das sieht so aus: <div class="tooltip"><span style="font-size: 18pt;">Rechts</span> <span class="tooltiptext tooltip-right">Rechts</span></div>

Danach das entsprechende Template im Reiter „Seite” des Editors auswählen: Seitentemplate

Letzte Bearbeitung: 6. August 2025 um 06:41