Schönere Tooltips mit einem MODx-Plugin

von Thomas Jakobi am Montag, 1. Dezember 2008 um 14:20 Uhr.

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:

tooltipX.plugin
Speichern
$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