Tooltips mit Dreamweaver CC / jQueryUI

Bis Adobe Dreamweaver CS6 konnte man zu einem beliebigen Element einen sogenannten “spry tooltip” anfügen. Bei Dreamweaver CC ist das entfallen, dafür ist die Benutzung von jQuery UI eingebaut worden. In dessen Grundausstattung gibt es eigentlich das Tooltip-Widget in Form eines speziell verwendeten title-Attributs. Warum das bei Dreamweaver CC nicht wie alle anderen Widgets im Menü “einfügen > jQueryUI >” enthalten ist, weiß ich nicht.

Zum Glück ist der Kunstgriff, das manuell nachzuholen, ganz minimal. Lediglich folgender Code muss in eine eigene Datei z.B. “eigene.js” (Aufruf im Head-Bereich im Template) eingebaut werden:

<script>
$(function() {
    $(document).tooltip();
});
</script>

Quelle: Tooltip | jQuery UI

Das gewünschte Element bekommt dann ein title-Attribut, also vielleicht

<a href="..." title="das ist der Tooltip">Linktext</a>

Das Gestalten der Tooltips, ggf. noch nach verschiedenen Kriterien (class) wird beispielhaft hier beschrieben:

Quelle: Specify jQuery UI Tooltip CSS styles

2013 – 2015

  • ** Website für die Kanzlei Rabe Kirsche & Kollegen, Leipzig
    Verwendung des selbst entwickelten Mikro-CMS zur Bearbeitung einzelner Seiten-Abschnitte mit Hilfe von “Textschnipseln” und tinyMCE
  • ** Browseranwendung: Dispatcher-Software für die Zusammenarbeit von Autohäusern (VW, Mercedes Benz) mit Abschlepp- und Bergungsdienst Scholz in Leipzig
    – starke Anwendung von jQuery / jQueryUI / JavaScript
    – modulare Bauweise, dadurch schnelle Anpassbarkeit an neue Kundenwünsche

Beginn des verstärkten Einsatzes von responsivem / fluidem Webdesign: