Design Clean
    >> Tipps zum anpassen

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-RadarDWD vom DWD.
Ich wohne hier und Du kannst mir auch eine Nachricht
Homepage:

Dein Name:

Betreff:

Deine 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.



Hier wurde die Seite https://clean-test.de.tl/nix.htm eingebunden.

- die Seite wurde in der Navi versteckt
- nur auf der Seite wurden alle div + table entfernt
- im Feld "Text UNTER Design" wurde dieser Inhalt eingefügt
- Inhalt wurde nur für diese eine Seite sichtbar gemacht
- so lässt sich auch eine Seite in der Mediabox aufrufen

Man muss darauf achten, das die Seite hier nur soviel Inhalt bekommt, wie diese Box auch an Höhe hat.

Wer mehr Infos dazu benötigt: Kontakt
clean-test.de.tl: Heute :20 Aufrufe



Auf "autostart" habe ich verzichtet. Klicke Play im Player.

nach Oben