Tutorial: Oxygen – Change SVG Tooltips

Contents

• Introduction
• SVG – Format
• SVG – References
• Changing the SVG's Title
  • Global change of the title
  • Individual change of the title

Introduction

Oxygen provides collections of icons that you can use in your design.
This can be used to create visually appealing elements, as shown in this (very simple and not so visually appealing) example:

If you now create a hyperlink on these icons, an unattractive effect suddenly appears:

If you hover the mouse over the icon, a tooltip is displayed. The tooltip corresponds to the name of the icon - and cannot be changed within Oxygen.
Even tricks like adding a "title" attribute to the icon or the surrounding link cannot reliably change the displayed tooltip.

So how can you customize the tooltips for the icon to your needs?
For this we need to take a short trip into the technical background.

SVG – Format

Oxygen provides the icons in SVG format. SVG looks kind of similar to HTML and defines the icon in the form of paths.

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

Source code of an SVG icon (simplified representation)

We see the enclosing svg tag, a title tag (line 2) and a path tag (line 3). In the title tag we find the name of the icon we know from Oxygen. At the same time, this is the text that is displayed as a tooltip. We want to change that somehow.

SVG – References

If an SVG icon is used multiple times on a page, the SVG source code would have to be included multiple times on the page. This is not much per icon. But if we used an icon five or ten times on the page, we would embed the same source code five or ten times.

Oxygen - known for its energy efficiency class "A" - works with SVG references. The source code for an SVG icon is embedded only once at the end of the page, and the icons on the page itself state something like "use the source code for icon xy". This would look like this:

<!-- Page Content: Icon used multiple times -->
<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>

...

<!-- Page bottom: Definition of Icon -->
<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>

Multiple use of the same icon with reference to the source code (simplified representation)

We see in the page content (lines 2-4) the multiple placement of the same icon, with reference where to find the definition for this icon. And at the bottom of the page (from line 9) the unique definition, that is the source code, for this icon. This makes the page much slimmer.

Changing the SVG's Title

We can't change the title of the SVGs within Oxygen, but we can change it at runtime using jQuery.
In Oxygen we need a code block to store our jQuery script.
If the icons are used on multiple pages, it is of course recommended to store the code block in the page template once, and not on each page individually. And I don't need to mention that the jQuery code belongs in the "JavaScript" section of the Oxygen Code Block.

In the jQuery solution I distinguish two cases:
1) Global change of the title
2) Individual change of the title

Global change of the title

If we want to change the title for an icon so that it is the same every time the icon is used, our jQuery looks like this:

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);
	});
});

Line 1: Our function is called as soon as the document is completely loaded.

Line 2: In the document, we search the definitions of the SVG icons at the bottom of the page for the titles they contain. With these we run through a loop.

Line 3: We get the current title text of the icon.

Lines 4 - 8: Now we check the current title texts (corresponds to the name of the icon as we find it in Oxygen) and memorize the title text we want in each case.

Line 9: Now we can replace the original title text of the icon with our own.

Done.

Individual change of the title

We need to do things a little differently if we want to use an icon multiple times, but use an individual title each time.
In this case, the jQuery script looks quite simple:

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

Line 1: Our function is called as soon as the document is completely loaded.

Line 2: In the document, we search the definitions of the SVG icons at the bottom of the page for the title elements they contain, and remove them entirely.

Now our icons do not show any tooltips at all.

However, this gives us the opportunity to add an individual title to the individual icon or links within the document. In Oxygen, we simply add a new attribute called "title" to the respective element under Advanced > Attributes and enter the title we want as the value.

Done.