Tooltip

Tooltip-Fenster

Ein Tooltip-Fenster mit Bild und Text : hier �ffnen Bild

Ich - unterwegs im Audi
Das Tooltip-Fenster hat (im CSS-Code) die Breite width: auto;.
Dadurch wird es immer so Breit, wie der Inhalt an Breite hat.
Die Bildbreite k�nnt Ihr im HTML-Code der Grafik festlegen.

Hier Tooltip-Fenster mit Video : hier �ffnen
Brazil Police Chases (Vollbild-Modus m�glich / Videosymbol unten rechts)
Falls sich versehentlich Fenster schliesst, einfach mit Maus wieder auf Linktext.
Das Video spielt automatisch weiter, kann dann auch gestoppt werden.

Weitere Beispiele :
Der Wasserstand in Flensburg, oder das aktuelle Niederschlags-Radar DWD

vom DWD.
Ich wohne hier und Du kannst mir auch eine Nachricht schreiben.

Wird versehentlich Tooltip geschlossen, bleiben Eingaben / Einstellungen erhalten.

Schritt 1: Der CSS-Code

Im Feld "Eigener <head> - Inhalt" CSS-Code

Das Feld finden wir bei "Extras" sind CSS-Codes am besten aufgehoben.
Das Feld findet Ihr bei "Extras". Es geht aber auch das Feld "Text �ber Design".

<style type="text/css">
<!--
/* Aussehen Text, der ber�hrt werden soll */
.info {
   font-size: 15px;
   color: chocolate;
   border-bottom: 1px dashed chocolate;
   text-decoration: none;
   cursor: help; }

/* Ein Symbol vor dem Linktext */
.info::before {
   color: chocolate;
   content: "\279E";
   font-size: 17px;
   padding-right: 0.2em;
} 

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

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

-->
</style>

Siehe im CSS-Code die Zeile content:
Das Unicode-Zeichen \279E erzeugt den Pfeil ➞ vor unserem Text.
Hier findet Ihr alle Sonderzeichen : https://unicode-table.com/de/sets/
F�r Verwendung im CSS-Code das U+ entfernen und durch \ ersetzen

Schritt 2: Der HTML-Code im Seiteninhalt

- Einloggen in Homepage
- dann auf "Seiten" klicken
- w�hle die Seite aus, die Du bearbeiten m�chtest
- die Seite ist zum Bearbeiten offen
- klicke oben Links in der Werkzeugleiste auf "Quellcode"
- die Seite ist nun in der "HTML-Code-Ansicht"

<a class="info">TEXT <span> HIER TOOLTIP-TEXT </span> </a>

Inhalt f�r das Tooltip platzieren wir zwischen <span> und </span>

Beispiel f�r Tooltip mit Bild :

<a class="info">TEXT <span> <img src="GRAFIK" alt="Bild" width="400"> </span> </a>

Das Wort GRAFIK ersetze durch die Grafikadresse

Beispiel f�r Tooltip mit Text unter Bild :

<a class="info">TEXT <span> <img src="GRAFIK" width="400"> <br> TEXT </span> </a>

Nach Bildcode wurde Zeilenumbruch mit <br> eingef�gt. Danach gew�nschter Text.

Beispiel f�r Tooltip mit Video :

<a class="info">TEXT <span> YOUTUBE-VIDEO-CODE </span> </a>

So findest Du den Video-Code

auf Youtube.

Tipp f�r den Seiteninhalt

Falls Ihr ein Design verwendet, das keine "rechte Boxen" verwendet, m�sst Ihr versuchen die Texte nicht am Rechten Inhaltsende zu platzieren. Also die Texte, welche das Tooltip-Fenster �ffnen. Die Tooltip-Fenster �ffnen sich "rechts versetzt" vom Text und k�nnten �ber das Design hinaus gelangen.

FB Messenger:

Anklicken und im Messenger schreiben

weitere Tutorials :

Boxen

mehr

Homepage:
Dein Name:
Betreff:
Deine Nachricht:

Tooltip

Tooltip-Fenster

Schritt 1: Der CSS-Code

Schritt 2: Der HTML-Code im Seiteninhalt

Tipp f�r den Seiteninhalt

FB Messenger:

weitere Tutorials :

Seitentipps

Testbox 1

Testbox 2

Tooltip

Tooltip-Fenster

Schritt 1: Der CSS-Code

Schritt 2: Der HTML-Code im Seiteninhalt

Tipp f�r den Seiteninhalt

Forum Login

Info zum Login

FB Messenger:

weitere Tutorials :

Seitentipps

Testbox 1

Testbox 2