Tooltips, Nicetitle mit Javascript und CSS

 18.02.2006 —  22.04.2016, 07:47 Uhr —  Web —  6 Kommentare

Diese nicetitles oder tooltips haben mir schon immer gefallen. Sofern Browser auch noch halbtransparente png-Grafiken anzeigen können, reicht dazu etwas Javascript und CSS.

Ich hatte mir dazu einfach über Google eine Anleitung gesucht und diese eingebaut.
Leider musste ich feststellen, dass im Javascript viel mehr geregelt war, als sein sollte. So konnte ich beispielsweise die Breite der Tipps nicht per CSS (variabel) einstellen.

Meine entsprechende CSS-Datei sieht so aus:

div.nicetitle {
    position: absolute;
    margin:0;
    padding: 4px;
    top: 0px;
    left: 0px;
    color: #707070;
    font-size: 13px;
    font-family: Arial, sans-serif;
    font-weight: normal;
    background: url('pfadzu/title.png') !important;
    background: #e6e8eb;
    text-align:left;
    -moz-border-radius: 15px;
    }
     
    div.nicetitle p {
    margin: 0; padding: 0 3px;
    }
    div.nicetitle p.destination {
    font-family: Arial, sans-serif;
    font-size: 10px;
    text-align: left;
    padding-top: 3px;
    color: #e97901;
    font-weight:normal;
    }

Diese habe ich einfach im Hauptverzeichnis gespeichert.

Tooltips, Nicetitle mit Javascript und CSS

Damit lasse ich allen vernünftigen Browsern das halbtransparente png-Bild anzeigen, der Internet Explorer dagegen soll einfach den hintergrund grau machen.
Zum Erstellen von halb-transparenten png-Grafiken gibt gab es ein klasse Online-Tool.
Dann sind nur noch Schrift, Ränder und Farben in Langschreibweise angegeben. Fertig.

Meine modifizierte Javascript-Datei könnt konntet Ihr hier downloaden. Sie beinhaltet auch eine Browserweiche für ältere Browser.

Im head-Breich der Webseite ist dann nur noch folgendes einzufügen:

    <script type="text/javascript" src="pfadzu/nicetitle.js"></script>
    <link rel="stylesheet" type="text/css" href="pfadzu/nicetitle.css" />

Feedback erwünscht!