Popups

Popup mit title=

Um einem Text oder einem Element auf deiner Seite weitere kurze Informationen zuzufügen oder Tipps zu erteilen, wenn man mit der Maus darüber fährt, eignen sich Popups
Auf dieser Seite habe ich die Elemente mit "Zusatz" hell unterlegt.
HTML hat da ein einfaches Hilfsmittel: das Tag-Attribut "title"="TEXT"

Beipiel mit dem title Attribut:


<h2 title="Ganz einfach mit 'title=text'" >Bleib mit der Maus über diesen Text stehen</h2>

Bleib mit der Maus über diesen Text stehen

Natürlich kann man das title Attribut auch mittels JS ändern:


document.getElementById(id).title = "Farbe ist " + palette[n];

Fahre mit der Maus über diesen Text und bleib darüber stehen

Popup mit STYLEAber so ist das Popup massiv sichtbarer!

Dieser Popup wird zu 100% mit CSS (Style) gesteuert. Dazu benutze ich einen eigenen PseudoTag <seoPP>, damit nicht ein bestehendes Tag zu nutzen, bei dem ich nicht weiss was es sonst noch bewirkt.


<style>
 	seoPP {display:none;}  /* Der Pseudotag seoPP wird unberührt NICHT angezeigt */
    
    .info{position:relative;}
    .info:hover{z-index:25; }
    .info:hover seoPP{ 	
		    display:block;
			position:absolute;
			top:1em;
			left:1em;
			font-size:24px;
			border:2px solid #000000;			
			background-color:rgba(255, 255, 0, 0.7);
			color:red;
			width:11em;}
  </style>

Berühre mit der Maus diesen Text Popup nur mit Styles!

Nicht nur Texte sondern auch Grafiken, nach dem Motto "Ein Bild ersetzt 1'000 Worte", können als Popup angezeigt werden.


<style>
 	seoPP {display:none;}  /* Der Pseudotag seoPP wird unberührt NICHT angezeigt */			
    .infoG{position:relative;}
    .infoG:hover{z-index:25; }  
	
    .infoG:hover seoPP{ 	
		        display:block;
		        position:relative;
			    top:-0.5em;
			    left:2em;
		       }
  </style>

Berühre mit der Maus diesen Text

Natürlich heisst das auch, dass man so Grafiken "vergrössern" kann.
Ich möchte mir hier einiges an Programmieraufwand für Position und Grösse der Grafiken ersparen, so lasse ich das nur als Beispiel stehen