Schönere Tooltips mit einem MODx-Plugin
Im MODx-Repository hat laurentc vor einiger Zeit ein Plugin für Tooltips veröffentlicht. Das Plugin ersetzt folgendes Tag {=text:tiptext:link=} in einem MODx-Dokument durch einen Link bzw. einen Span mit der Klasse 'tooltips' und dem Attribut 'title'.
Per Javascript wird dieser Klasse nun ein hover-Event zugewiesen und damit die Tooltips ausgegeben. Dies sieht folgendermaßen aus: {=text:tiptext:https://link=}. Wenn Javascript nicht aktiv ist, zeigt der Browser in der Regel browsereigene Tooltips an.
Da dieses Plugin einen größeren Bug enthielt (es wurdem maximal vier Tooltip-Einträge pro Seite ausgegeben) und das Plugin innerhalb des von Snippets generierten Seitenquellcodes nicht funktionierte, habe ich es umgeschrieben und folgende Änderungen vorgenommen:
- Die Tooltips werden nun mit den mootools 1.11 ausgegeben, welche mit MODx 0.9.6.x. ausgeliefert werden (auf dieser Seite werden die mootools 1.2.3 benutzt)
- Wenn kein Link für das Tooltip angegeben ist, wird anstelle eines a-Tags ein span-Tag im Seitenquellcode ausgegeben.
- Die generelle Ausgabe eines Tooltips für alle a-Tags ist nicht mehr implementiert.
Zur Installation wird im Backend wird unter dem Namen tooltipX ein Plugin angelegt und der Text aus der folgenden Datei eingefügt:
$includeMootools = isset ( $includeMootools ) ? ( bool ) $includeMootools : true; $includeMootoolsJs = '<script type="text/javascript" src="manager/media/script/mootools/mootools.js"></script>'; $includeTooltipsCss = '<link rel="stylesheet" href="assets/plugins/tooltipx/tooltipx.css" type="text/css" media="screen" />'; $includeTooltipsJs = <<<EOT <script type="text/javascript"> window.addEvent('domready', function(){ var Tooltips = new Tips($$('.tooltips'), { initialize:function(){ this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 250, wait: false}).set(0); }, onShow: function(toolTip) { this.fx.start(1); }, onHide: function(toolTip) { this.fx.start(0); } }); }); </script> EOT; $e = &$modx->Event; $tbl_tips = array(); switch ( $e->name) { case 'OnLoadWebDocument' : if (preg_match ( '~\{\=(.*?)\:(.*?)\:(.*?)\=\}~', $modx->documentObject['content'] ) > 0) { if ($includeMootools) $modx->regClientStartupScript ( $includeMootoolsJs ); $modx->regClientStartupScript ( $includeTooltipsJs ); $modx->regClientCSS ( $includeTooltipsCss ); } return; break; case 'OnWebPagePrerender' : if (preg_match_all ( '~\{\=(.*?)\:(.*?)\:(.*?)\=\}~', $modx->documentOutput, $tbl_tips, PREG_PATTERN_ORDER )) { for($i = 0; $i < count ( $tbl_tips [0] ); $i ++) { if ($tbl_tips [3] [$i] != '') { $bubblelink = '<a href="' . $tbl_tips [3] [$i] . '" class="tooltips" title="' . $tbl_tips [2] [$i] . '" >' . $tbl_tips [1] [$i] . '</a>'; } else { $bubblelink = '<span class="tooltips" title="' . $tbl_tips [1] [$i] . ' :: ' . $tbl_tips [2] [$i] . '" >' . $tbl_tips [1] [$i] . '</span>'; 'href="#" onclick="return false;"'; } $modx->documentOutput = str_replace ( $tbl_tips [0] [$i], $bubblelink, $modx->documentOutput ); } } return; break; default : return; break; }
Für das Plugin müssen die Events OnLoadWebDocument und OnWebPagePrerender aktiviert werden.
Im Reiter 'Konfiguration' kann folgende optionale Konfiguration unter 'Plugin Konfiguration' eingefügt werden.
&includeMootools=Include Mootools?;int;1
Wenn includeMootools auf 0 gesetzt ist, wird im head-Abschnitt kein Verweis auf das mootools-Javascript ausgegeben.
Nun lädt man sich aus dem MODx-Repository noch die restlichen Daten des Plugins herunter (benötigt werden die Bubble-Grafik und die CSS-Datei) und kopiert sie in die MODx-Installation ins Verzeichnis /assets/plugins/tooltipx.
Viel Erfolg