Blog

Anleitung: Oxygen – SVG Tooltips ändern

,

Inhalt

Einführung

Oxygen bietet Sammlungen von Symbolen, die man in seinem Design verwenden kann.
Damit lassen sich optisch ansprechende Elemente gestalten, wie dieses (sehr einfache und optisch gar nicht mal so ansprechende) Beispiel zeigt:

Verlinkt man nun diese Symbole, taucht plötzlich ein unschöner Effekt auf:

Bewegt man die Maus auf das Symbol, wird ein Tooltip angezeigt. Der Tooltip entspricht dem Namen des Symbols – und kann in Oxygen nicht geändert werden.
Auch durch Tricks, wie das Hinzufügen eines "title" Attributes zum Symbol oder Link, kann man den angezeigten Tooltip nicht zuverlässig ändern.

Wie kann man also die Tooltips für die Symbol nach seinen Wünschen anpassen?
Dazu müssen wir einen kurzen Ausflug in die technischen Hintergründe unternehmen.

SVG – Format

Oxygen stellt die Symbole im Format SVG zur Verfügung. SVG sieht irgendwie ähnlich aus wie HTML und definiert das Symbol in Form von Pfaden.

<svg ...>
	<title>comments</title>
	<path class="path-1" d="M200.6,48.55V170...."/>
</svg>

Quellcode eines SVG Symbole (stark vereinfachte Darstellung)

Wir sehen das umschließende svg Tag, ein title Tag (Zeile 2) und ein path Tag (Zeile 3). Im title Tag finden wir den Namen des Symbols, den wir aus Oxygen kennen. Gleichzeitig ist das der Text, der als Tooltip angezeigt wird. Das wollen wir irgendwie ändern.

SVG – Referenzen

Wird ein SVG Symbol mehrmals auf einer Seite verwendet, müsste der SVG Quellcode mehrmals auf der Seite eingebunden werden. Das ist nicht viel pro Symbol. Haben wir aber ein Symbol fünf- oder zehnmal auf der Seite verwendet, würden wir den gleichen Quellcode fünf- oder zehnmal einbetten.

Oxygen – bekannt für seine Energie-Effizienz-Klasse "A" – arbeitet mit SVG Referenzen. Dabei wird der Quellcode zu einem SVG Symbol nur ein mal am Ende der Seite eingebettet, und bei den Symbolen auf der Seite selbst steht dann sinngemäß so etwas wie "benutze hierfür den Quellcode zu Symbol xy". Das sieht wie folgt aus:

<!-- Seiten-Inhalt: Symbol mehrfach verwendet -->
<svg id="icon-1"><use xlink:href="#FontAwesomeicon-comments"></use></svg>
<svg id="icon-2"><use xlink:href="#FontAwesomeicon-comments"></use></svg>
<svg id="icon-3"><use xlink:href="#FontAwesomeicon-comments"></use></svg>

...

<!-- Seiten-Ende: Definition des Symbols -->
<svg ... aria-hidden="true" style="... width: 0; height: 0; overflow: hidden;">
	<defs>
		<symbol id="FontAwesomeicon-comments" ...>
			<title>comments</title>
			<path d="M22 12c0 4.422-4.922 ..."></path>
		</symbol>
	</defs>
</svg>

Mehrfache Verwendung des gleichen Symbols mit Referenz zum Quellcode (stark vereinfachte Darstellung)

Wir sehen im Seiteninhalt (Zeilen 2-4) die mehrfache Platzierung des gleichen Symbols, mit Referenz, wo die Definition für dieses Symbol zu finden ist. Und am Seitenende (ab Zeile 9) die einmalige Definition, also den Quellcode, für dieses Symbol. Das macht die Seite viel schlanker.

Änderung des SVG-Titels

Wir können den Titel der SVGs nicht innerhalb von Oxygen ändern, aber zur Laufzeit unter Zuhilfenahme von jQuery.
In Oxygen brauchen wir hierfür einen Code Block, in dem wir unser jQuery Skript hinterlegen.
Werden die Symbole auf mehreren Seiten verwendet, empfiehlt es sich natürlich, den Code Block im Seiten-Template zentral zu hinterlegen, und nicht auf jeder Seite individuell. Und ich brauche nicht zu erwähnen, dass der jQuery Code in den Abschnitt "JavaScript" des Oxygen Code Blocks gehört.

Bei der jQuery Lösung unterscheide ich zwei Fälle:
1) Zentrale Änderung des Titels
2) Individuelle Änderung des Titels

Zentrale Änderung des Titels

Wollen wir den Titel für ein Symbol so ändern, dass er bei jeder Verwendung des Symbols gleich ist, sieht unser jQuery so aus:

jQuery(document).ready(function($){
	$('svg defs symbol title').each(function(){
		let $title = $(this).text();
		switch ($title) {
			case 'comment':	$title = 'Chat';    break;
			case 'music': 	$title = 'Audio';   break;
			case 'cogs': 	$title = 'Service'; break;
		}
		$(this).text($title);
	});
});

Zeile 1: Unsere Funktion wird aufgerufen, sobald das Dokument vollständig geladen ist.

Zeile 2: Im Dokument suchen wir in den Definitionen der SVG Symbole am Seitenende die darin enthaltenen Titel. Damit durchlaufen wir eine Schleife.

Zeile 3: Wir holen uns den aktuellen Titel-Text des Symbols.

Zeile 4 - 8: Nun prüfen wir die aktuellen Titel-Texte (entspricht dem Namen des Symbols, so wie wir es in Oxygen finden) und merken uns den jeweils von uns gewünschten Titel-Text.

Zeile 9: Jetzt können wir den Original-Titel-Text des Symbols durch unseren ersetzen.

Fertig.

Individuelle Änderung des Titels

Wir müssen ein wenig anders vorgehen, wenn wir ein Symbol zwar mehrmals verwenden, aber jedesmal einen individuellen Titel verwenden wollen.
In diesem Fall sieht das jQuery Skript viel einfacher aus:

jQuery(document).ready(function($){
	$('svg defs symbol title').remove();
});

Zeile 1: Unsere Funktion wird aufgerufen, sobald das Dokument vollständig geladen ist.

Zeile 2: Im Dokument suchen wir in den Definitionen der SVG Symbole am Seitenende die darin enthaltenen Titel Elemente und entfernen sie komplett.

Nun zeigen unsere Symbole erst mal gar keine Tooltips mehr.

Das gibt uns aber die Möglichkeit, bei den einzelnen Symbolen oder Links innerhalb des Dokumentes einen individuellen Titel hinzuzufügen. In Oxygen fügen wir dazu bei dem jeweiligen Element unter Advanced > Attributes einfach ein neues Attribut namens "title" hinzu und tragen als Wert den von uns gewünschten Titel ein.

Fertig.

Erstveröffentlichung: 03.06.2021 auf Anleitung: Oxygen – SVG Tooltips ändern
magnifier