Tooltips verbessern (Sweet Titles)

Zur Darstellung von Tooltips benutze ich Sweet Titles.
Es handelt hierbei um eine Java-Script Datei die man in das Blog-Theme (oder auch Webseite) einbinden kann.

Was ist ein Tooltip?
Beispiel:

(mehr zu Prof. Van Dusen)

Wikipedia Auszug:

In der Informatik ist ein Tooltip (auch „Quickinfo“, „Kurzinfo“ …) ein kl. Fenster in einer grafischen Benutzeroberfläche, das dem Benutzer weitere Informationen zu einem Objekt anzeigt. Es wird z.B. in Browsern als alternative Anzeige für Bilder, zur Beschreibung von Links oder zur Erklärung von Icons … in Computerprogrammen verwendet und erscheint, wenn der Mauszeiger eine gewisse Zeit über dem entsprechenden Objekt verbleibt.

Installation

1. Sweet Titles downloaden
2. Entpacken und die Ordner /js und /css in den Theme-Ordner hochladen
3. In der header.php die Dateien verlinken:
   <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/addEvent.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/sweetTitles.js"></script>
4. Optik (css)
   Entweder in der Stylesheet-Datei (style.css)
   die Angaben zur Optik vornehmen bzw. die beiliegende css-Datei importieren.
   @import „css/sweetTitles.css“;
   Meine css-Angaben sind unten im Beitrag zu sehen.

Alternativ kann man sich das Script auch als Plug-In von Frank Bueltge installieren.

Dieses Java-Script lässt sich aber in einigen Punkten verbessern:

Um die Änderungen vorzunehmen:

• Website von Lars Schenk öffnen
  (hier befindet sich das modifizierte Script)

1. Unterdrückung des „http://“ bei der URL-Anzeige
   (Ergebniss siehe obiges Bild)
   Hierzu muss lediglich die Zeile:
   addy = addy.replace('http://','');
   hinzugeügt werden.(Zeile 12).
   Dadurch kann man (wenn gewünscht) den Zeichensatz erhöhen.
2. Bei der eigenen Blog- bzw. Website-Adresse soll die URL nicht angezeigt werden.
   Entweder lässt man die Adresse weg oder verwendet statt dessen einen Text.
   Um die eigene Webseite ohne URL anzuzeigen (Zeile 13):
   if ( !addy.search('www.lars-schenk.')) addy = '';
   Ich habe es geändert zu:
   if ( !addy.search('blog.funkygog.')) addy = 'funkygog|Blog';
   Es können auch beliebige weitere URL-Adressen geändert bzw. versteckt werden.
   Javascript Anzeige im Tooltipp verhindern:
   if ( !addy.search('javascript:')) addy = '';
3. Damit keine leeren Tooltipp Fenster erscheinen:
   Den bestehenden Eintrag:
   this.tip.style.visibility = 'visible';
   ersetzen durch:
   if (addy || anch.getAttribute('tip')) this.tip.style.visibility = 'visible';

Die Optik (Style.css)

In meinem Theme verwende ich folgende Einstellungen:

/* Fading Tooltips By Dustin Diaz*/
#toolTip {
position:absolute;
z-index:1000;
width:250px;
background:#676767;
color: #8E3008;
text-align:left;
padding:5px;
margin-top: -10px;
min-height:2em;
}
#toolTip p {
margin:0;
padding:0;
color:#fff;
font:11px/12px verdana, arial, sans-serif;
}
#toolTip p em {
display: block;
margin-top: 3px;
color: #A2CCFF;
font-style: normal;
font-weight: bold;
}
#toolTip p em span {
font-weight:bold;
color:#fff;
}