Trival-Blog

Man kennt das ja, man programmiert etwas und weiß natürlich im Schlaf wo was eingetragen werden soll. Aber der Nutzer des späteren Programms hat leider keinen Zugang zum Kopf des Programmierers, ist also meist etwas auf sich allein gestellt. Intuitive Bedienung steht auf der einen Seite, doch oft ist es einfach nur der unbekannte Sachverhalten der sich schwermütig auf die andere Seite stellt. So geht es mir bei einem aktuellen Projekt auf Arbeit, ein Fotoarchiv in dem die IPTC-Daten der Fotos erfasst und angepasst werden sollen. Nun ist für mich klar was es mit der “Original Transmission Reference” oder dem “Object Cycle” auf sich hat. Das gleiche kann ich allerding nicht von jedem Kollegen erwarten, also muss eine Hilfestellung her. Ein sogenannter Tooltipp. Ein Meldung die erscheint und eine Erklärung bereit hält.

Ich arbeite gerne solange wie es geht ohne Javascript, da ich der Meinung bin eine Seite sollte auch mit geblockten Scripten noch lauffähig sein. Also ging mein Gedanke in Richtung CSS.

Mit Javascript hätte man einfach ein onMouseOver erzeugen können, doch das wollte ich ja nicht. Zum Glück bietet HTML von Haus aus auch ein Element, welches auf überfahren mit der Maus reagiert, der Link.
In diesem können wir wie gewohnt Texte und Bilder platzieren.

<a class="tooltipp">Tipp
   <span class="tt_text">Hier findet der Text des Tooltipps platz</span>
</a>

Damit haben Link auf dem “Tipp Hier findet der Text des Tooltipps platz” steht. Nicht ganz das was wir wollten. Also müssen noch ein paar Zeilen CSS hinzugefügt werden.

a.tooltipp{
   text-decoration: none; /*Damit der Tooltipp nicht unterstrichen wird*/
}

.tooltipp span.tt_text{
   display:none; /*Damit der Tooltipp im Normalfall nicht sichtbar ist*/
}

.tooltip:hover span.tt_text{
   display: block; /*Damit der Tooltip Sichtbar ist und unter dem Text*/
   position: absolute; /*Damit der Tooltipp über dem normalen Textfluss liegt*/
}

Dies reicht für die Anzeige des Tooltipps aus und sieht dann aber für einen Tooltipp ungewöhnlich aus. Der Text schwebt dann einfach irgendwie über dem anderen Text.

a.tooltipp{
   text-decoration: none; /*Damit der Tooltipp nicht unterstrichen wird*/
}

.tooltipp span.tt_text{
   display:none; /*Damit der Tooltipp im Normalfall nicht sichtbar ist*/
}

    .tooltipp:hover span.tt_text{
        font: normal 0.8em/1.2em Verdana, Arial, Helvetica, Courier;
        padding: 3px;
        width: 300px;
        display: block; /*Damit der Tooltip Sichtbar ist und unter dem Text*/
        position: absolute; /*Damit der Tooltipp über dem normalen Textfluss liegt*/
        background: #EEF;
        border: 1px solid black;
    }

So ergänzt sieht das doch schon ganz schick aus, ein Text in einem farbigem Rahmen, vom Rand etwas abgesetzt. Hier is natürlich nur der eigenen Fantasie grenzen gesetzt.
Auch bei der Gestaltung des Textes haben wir noch einige Mittel zu Hand. So können wir ihn noch mit den typischen Auszeichnunge wie Bold und Italic versehen. Auch Zeilenumbrüche und Bilder sind möglich.

Ich bin mit der Lösung sehr zufrieden und vielleicht hilft sie ja einigen die auf der Suche nach einer Tooltipp ohne Javascript sind