Die Tooltip-Funktion als Hinweis für Vergrößerung von Seiteninhalten verwenden

Oft möchte man dem Besucher einer Website die Möglichkeit geben, die Schriftgröße ändern zu können. Früher wurde dies oft auf JavaScript-Basis erreicht. Mit aktuellen und modernen Browsern wie Firefox, Opera, Safari, Chrome und auch dem Internet Explorer ab Version 8 lässt sich diese Funktion mit „Bordmitteln” erreichen. Nur wissen viele Benutzer oft nicht um die - quasi versteckten - Methode.

Genau genommen wird hierbei nicht mehr die Schrift alleine vergrößert, sondern der gesamte Inhalt einer Webseite. Richtig wäre dann auch die Bezeichnung der Funktion anzupassen – viele Benutzer kennen jedoch die Funktion in Form der Darstellung A+ A A-.

Eine Möglichkeit, auf diese Bedienungshinweise dezent hinzuweisen, wird in diesem Tutorial gezeigt.

Basierend auf einem Forenpost von Harry Boldt zur Verwendung einer Tooltip-Funktion in Contao wird entsprechend der Hinweis zur Bedienung des Browsers eingebunden.

Beispiel

Zutaten – oder was wird benötigt?

- ein MooTool-Skript für die Tooltip-Funktion
- CSS für die Formatierung des Tooltip
- Einbinden in einen Artikel oder als Modul in das Seitenlayout

MooTools-Template für die Tooltip-Funktion

<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready', function()
{
	var myTips = new Tips($$('.tooltip'),
	{
		showDelay: 0,    //Verzögerung bei MouseOver
		hideDelay: 100,   //Verzögerung bei MouseOut
		className: 'tool', //CSS-Klassennamen --> CSS-Definitionen
		offsets: {'x': 20, 'y': -100 }, // Versatz des Tooltips
		// ab MooTools 1.3 wird offset ohne s verwendet.
		fixed: true, // false = Tooltip bewegt sich mit dem Mauszeiger, true=Tooltip bewegt sich nicht
	});

// zeigt den Tooltip bei Fokus an | ergänzt 02.01.2011

	$$('.tooltip').each(function(el) {
		el.addEvent('focus', function(event){
			myTips.elementEnter(event, el);
		}).addEvent('blur', function(event){
			myTips.elementLeave(event, el);
		});
	});
});
//--><!]]>
</script>

Das MooTools-Skript speichern Sie in einem UTF-8-fähigen Texteditor ab; z.B. unter dem Namen „moo_tooltip.tpl”. Wichtig ist, das der Name mit „moo” beginnt und mit „.tpl” endet. Anhand der vorangestellten „moo” erkennt Contao, das eine Funktion des MooTools-Framework verwendet werden soll; die Endung „.tpl” wird als Template erkannt und kann dann in den Seitenlayout-einstellungen ausgewählt werden. Laden Sie dann diese Datei in das Verzeichnis „templates” in Ihrer Contao-Installation.

Binden Sie nun dieses Template in das Seitenlayout ein, indem Sie innerhalb der Seitenlayout-Einstellungen in der Rubrik „Skript-Einstellungen” das MooTools-Skript „moo_tooltip.tpl” durch Klick auf die Checkbox aktivieren. Speichern Sie dann das Seitenlayout.

MooTools-Skript in das Seitenlayout einbinden

Die CSS-Definitionen für die Tooltips

/* Style sheet tooltip */
/* Gesamtbreite für den Tooltip definieren */
.tool
{width:500px;
}

/* Definitionen für den Tooltip-Titel definieren */
.tool .tip-title
{
margin:0 0 10px 0;
padding:10px 20px;
font-family:verdana,arial,sans-serif;
font-weight:bold;
font-size:1.2em;
color:#fff;
background:#666;
/* Gecko-Browser (Firefox) */
-moz-box-shadow:2px 2px 8px #999;
/* Webkit-Browser (Safari, Chrome) */
-webkit-box-shadow:2px 2px 8px #999;
/* allgemein CSS3 */
box-shadow:2px 2px 8px #999;
}

/* Definitionen für den Tooltip-Beschreibungstext definieren */
.tool .tip-text
{
margin:0;
padding:10px 20px;
font-family:verdana,arial,sans-serif;
font-size:1.1em;
line-height:1.7;
background:#fff;
/* Gecko-Browser (Firefox) */
-moz-box-shadow:2px 2px 8px #999;
/* Webkit-Browser (Safari, Chrome) */
-webkit-box-shadow:2px 2px 8px #999;
/* allgemein CSS3 */
box-shadow:2px 2px 8px #999;
}

Kopieren Sie sich die CSS-Definitionen in ein vorhandenes CSS-Dokument und passen Sie die Definitionen an Ihr Design an. Hier in diesem Beispiel wurden noch Schatten für den Tooltip mit CSS3-Eigenschaften ergänzt; der Titel des Tooltips wurde mit Abstand zum Beschreibungstext gesetzt.

Einbinden des Tooltip-Aufrufs

<a class="tooltip" title="Vergrößerte Darstellung der Seiteninhalte in Ihrem Webbrowser?" rel="Ist Ihnen die Darstellung des Inhaltes auf dieser Seite zu klein, dann können Sie in aktuellen Browsern (Firefox 3.6, Chrome, Safari, Opera, Internet Explorer ab Version 8) eine Vergrößerung durch folgende Tastenkombinationen erreichen:<br >
<strong>STRG +</strong> (Vergrößern)<br />
<strong>STRG -</strong> (Verkleinern)<br />
<strong>STRG 0</strong> (Null – wieder auf Standard zurücksetzen)<br /><br >
Die Kombination von gedrückter STRG-Taste und dem Bewegen des Scrollrads der Maus vergrößert oder verkleinert ebenso die Darstellungsgröße einer Website im Browserfenster.<br /><br />
Wenn Sie einen Apple Mac zum Surfen nutzen, verwenden Sie für die Tastenkombinationen die APFEL-Taste anstatt der STRG-Taste." tabindex="0">Darstellungsgröße + -</a>

Die Link mit dem Tooltip können Sie nun auf unterschiedliche Weisen einbinden. Innerhalb eines Artikels als Inhaltselement Text oder HTML oder auch alternativ via Insert-Tag eines versteckten Artikels als Modul in das Seitenlayout einbinden. Dann steht Ihnen der Tooltip für die Änderung der Darstellungsgröße zentral auf allen Seiten zur Verfügung, die dieses Seitenlayout verwenden.

Oder Sie ergänzen den Text, der den Tooltip anzeigt, um einen Link auf eine Seite mit einer ausführlichen Beschreibung. Natürlich lässt sich die Tooltip-Funktion auch für viele andere Anwendungsbeispiele nutzen…

Ergänzung: (02.01.2011)
Durch die Ergänzung des Tags tabindex="0" innerhalb des Tooltip-Aufrufs und Anpassung des JavaScripts innerhalb des Tooltip-Templates (moo_tooltip.tpl) wird der Tooltip jetzt auch durch Auswahl mit der Tastatur (Fokus) angezeigt.

Ergänzung: (23.11.2012)
Ab Mootools 1.3 heist es "offset" anstatt "offsets" im MooTools-Skript.
Danke für den Hinweis an magicsepp. 

twitter
rss-news-feed
weitzeldesign
planepix