CSS onMouseover Tooltip/Popup

Mit CSS kann man echt tolle Sachen machen. Beispielsweise einen Text formatieren der beim Überfahren mit der Maus (onMouseover) einen weiteren Text in einem Popup anzeigt.

Demo: HilfeHilfe
Und hier steht die Erklärung zur Hilfe drin.

.

Folgendes muss im Quelltext stehen damit der Tooltip angezeigt wird.

<a class="tooltip" href="#">Hilfe<span><b>Hilfe</b> <br /> Und hier steht die Erklärung zur Hilfe drin. </span></a>

.

Außerdem muss die Klasse „tooltip“ in Cascading Style Sheets angegeben werden.


<style type="text/css">
<!--

/* Tooltip */

a.tooltip,
a.tooltip:link,
a.tooltip:visited,
a.tooltip:active {
position: relative;
text-decoration: none;
font-style: bold;
border-bottom:0px dotted #4dbcf3;
}

a.tooltip:hover {
background: transparent;
z-index: 100;
}

a.tooltip span {
display: none;
text-decoration: none;
}

a.tooltip:hover span {
display: block;
position: absolute;
top: 30px;
left: 0;
width: 200px;
z-index: 100;
color: #000000;
border: 1px solid;
border-color: #FFFFFF #D5D7DB #D5D7DB #FFFFFF;
border-left: 4px solid #4dbcf3;
padding: 2px 10px 2px 10px;
background: #EEEEEE;
font-family: Verdana, Arial, Helvetica, Sans-serif;
font-style: Normal;
text-align: left;
}

–>
</style>

Und so muss der Link und die CSS Klasse in einer HTML Webseite eingefügt werden.


<html>
<head>
<title>Titel deiner Seite</title>

<style type="text/css">
<!--

/* Tooltip */

a.tooltip,
a.tooltip:link,
a.tooltip:visited,
a.tooltip:active {
position: relative;
text-decoration: none;
font-style: bold;
border-bottom:0px dotted #4dbcf3;
}

a.tooltip:hover {
background: transparent;
z-index: 100;
}

a.tooltip span {
display: none;
text-decoration: none;
}

a.tooltip:hover span {
display: block;
position: absolute;
top: 30px;
left: 0;
width: 200px;
z-index: 100;
color: #000000;
border: 1px solid;
border-color: #FFFFFF #D5D7DB #D5D7DB #FFFFFF;
border-left: 4px solid #4dbcf3;
padding: 2px 10px 2px 10px;
background: #EEEEEE;
font-family: Verdana, Arial, Helvetica, Sans-serif;
font-style: Normal;
text-align: left;
}

-->
</style>

</head>
<body>

<a class="tooltip" href="#">Hilfe<span><b>Hilfe</b> <br /> Und hier steht die Erklärung zur Hilfe drin. </span></a>

</body>
</html>

.

Weitere Beispiele (mit Text) findest du weiter unten bei „Leave a Reply“. Dazu den Mauszeiger über (Help) halten.

8 Gedanken zu “CSS onMouseover Tooltip/Popup

  1. Hi,

    das tool ist echt klasse ! Hier unten bei den kleinen (Help) ist mir aufgefallen, das im IE6 die Schrift der anderen (Help) im Tooltip durchscheint. Abhilfe schafft hier der folgende zusätzliche Eintrag im a.tooltip.hover :

    a.tooltip:hover {
    background: transparent;

    z-index: 100;

    }

    Dann funktionierts da ohne durchscheinen.
    Ich habe da eher das Problem, dass ich das für einen Kalender nutzen wollte und den Tooltip automatisch anzeigen lassen wollte. Da ich da aber mit PHP mehrdimensionale Arrays auslese, klappt das leider nicht. Vielleicht irgend einen Tipp ?

    Gruß

    DerOpa

  2. Thanks, genau nach sowas hab ich gesucht! Ist es eigentlich auch möglich das Skript bei einer Tabelle zu verwenden ( d.h. wenn der Mauszeiger in eine leere Zelle der Tabelle kommt wird die Infobox angezeigt ). Ist sowas möglich?

  3. Müsste theoretisch gehen. Musst den Link halt in den TD Bereich rein bringen und ein Leerzeichen verlinken.


    <table>
    <tr>
    <td><a class="tooltip" href="#"> &nbsp;&nbsp;&nbsp;&nbsp; <span><b>Hilfe</b> <br /> Und hier steht die Erklärung zur Hilfe drin. </span></a></td>
    </tr>
    </table>

    Was anderes fällt mir auf die schnelle auch nicht ein… sonst halt mal Googlen! 😉

  4. Thanks, habs grad ausprobiert. Leider verziehts mir dabei die Tabelle :( Mal schaun vielleicht ergibt sich ja ne andere Lösung…

  5. hi!
    kann man das auch irgendwie bewerkstelligen dass der tooltip entweder solange stehenbleibt bis man auf einen anderen fährt oder aber so dass man mit der maus in das popup-fenster fahren und dort vorhandene links auswählen kann?

  6. Hallo! Ich hab das Problem im Firefox, dass bei den exakten Werten diese „Hover-Pop-Ups‘ oben links fast ganz in der Ecke erscheinen. Was mache ich falsch bzw. wieso passiert das so? Hier geht es doch auch automatisch daneben =) Im IE übrigens gleiches Problem ^^ Ich weiß, man kann wohl mit Top & Left rumspielen, doch hier ist das doch irgendwie automatisch geregelt, oder nicht?

Die Kommentarfunktion ist geschlossen.