Tooltips - Nicetitle mit Javascript und CSS

nicetitles 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(cascading stylesheets) (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: Tohama, 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;
font-weight: normal;
background: url('http://www.hartl.info/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, verdana, sans-serif;
font-size: 10px;
text-align: left;
padding-top: 3px;
color: #e97901;
font-weight:normal;
}

Diese habe ich einfach im Hauptverzeichnis gespeichert.

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 es ein klasse Online-Tool*.
Dann sind nur noch Schrift, Ränder und Farben in Langschreibweise angegeben. Fertig.

Meine modifizierte Javascript-Datei könnt Ihr hier downloaden. Sie beinhaltet auch eine Browserweiche für ältere Browser.
Download Javascript Nicetitles (size: 5.70KB, downloads: 846).

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


<script type="text/javascript" src="http://www.hartl.info/nicetitle.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.hartl.info/nicetitle.css" />

Feedback erwünscht!

Tooltips, Nicetitle mit Javascript und CSS

Veröffentlichung: 18.02.2006
Rubrik(en): Webdesign Textpattern
Stichwörter: css, javascript, nicetitle, textpattern, txp

7 Kommentare

1

olaf schrieb am 21. Februar 2006, 06:57 folgendes:

sehr nett das ganze.
wobei ich mich frage ob es möglich ist einen umbruch innerhalb des tootltips zu erzeugen? denke schon. man könnte einfach ne bestimmte länge z.b. 50zeichen angeben und dann nen umbruch produzieren…
2

Robert Hartl schrieb am 22. Februar 2006, 21:00 folgendes:

Hallo Olaf,
danke für Deinen Kommentar.
Ich habe bewusst keine Breite der Tooltips in der CSS angegeben, sondern nur Abstände zu den Rändern. Damit ist das Tooltipp-Fenster immer so lang wie der Text + Abstand. Natürlich könnte man eine Breite vorgeben. Eine Maximalbreite verstehen aber leider nur moderne Browser, Internet Explorer exklusive.
Letzteres könnte man vielleicht innerhalb des Javascripts realisieren. Bei Gelegenheit schau ich mir das an.
3

Birgit schrieb am 23. Februar 2006, 22:18 folgendes:

das hier kommt wie gerufen, habe mich nämlich gerade vorher auf einer anderen seite gefragt, was diese “nice…”-parameter im quelltext zu bedeuten haben.
werd das mal bookmarken und später lesen :)
4

still schrieb am 30. April 2006, 03:17 folgendes:

das mit dem zeilenumbruch beschäftigt mich gerade.. weder noch #&10; helfen zu dem gewünschtem ergebnis :|

jemand einen tipp?
5

modv schrieb am 10. Mai 2006, 21:25 folgendes:

&#10
6

neves schrieb am 17. August 2006, 08:07 folgendes:

Hi,
anstatt halbtransparentBilder zu verwenden kannst du auch
filter:Alpha(opacity=80);
verwenden. Wird auf jeden fall vom IE unterstützt.
7

Robert Hartl schrieb am 3. November 2006, 04:13 folgendes:

Danke für die hilfreichen Kommentare.

Leider ist das Nicetitle-Script dem Redesign zum Opfer gefallen, aber vielleicht baue ich es bald wieder ein.