find-templates

Tooltip

zurück zur Übersicht

Tooltip-Fenster



Fahre mit der Maus über den farbigen Textund es öffnet sich ein Tooltip-Fenster.
Es kann jede beliebige Farbe bekommen. und es öffnet sich ein Tooltip-Fenster. Farbe und Größe kann angepasst werden. Im Tooltip-Fenster können wir auch Bilder öffnen lassen. Zum Beispiel die aktuelle Wettergrafik vom DWD. Es lassen sich im Tooltip-Fenster auch Videos öffnen. Die Maus muss dann allerdings im Fenster bleiben. Hier noch ein Beispiel mit meinem Skype-Status Mein Status und dem aktuellen Wasserstand in Flensburg.

Schritt 1: CSS-Code für das Aussehen

Baukasten-Design "CSS" ? = Einfügen im Feld "css ohne style-tags"
Alle anderen Designs = Einfügen im Feld "Text über Design" (dort dann vor dem --></style>)



/* Text, der berührt werden soll */
.info {
   font-size: 14px;
   color: chocolate;
   border-bottom: 1px dashed chocolate;
   text-decoration: none;
   cursor: help; }

/* Tooltip Fenster */
.info span { 
   position: absolute;
   width: 200px;
   color: #202020;
   padding: 10px 10px 10px 20px;
   margin-top: -50px;
   background-color: #FFFFFF;
   border-radius: 15px 15px 15px 0px;
   box-shadow: 2px 2px 12px 2px #aaaaaa;
   visibility: hidden; }

/* bei Mauskontakt sichtbar */
.info:hover span { visibility: visible; }

Schritt 2: HTML-Code für Seiteninhalt

- auf "Eigene Seiten editieren"
- wähle gewünschte Seite aus
- im Editor (Werkzeugleiste) oben links auf "Quellcode" klicken
- hier der Code, um Text mit Tooltip zu versehen:


<a class="info">TEXT <span>HIER INHALT FÜR TOOLTIP</span></a>
Heute: 4 Besucher