From Gigantic Wiki
There are 2 types of tooltips which can be used in <div> or <span> tags: basic-tooltip and advanced-tooltip. First variant creates simple tooltip with its content being in title parameter of the tag, it does not support text formatting. Second variant lets to use more complicated text as tooltip's content, but inside new <span> tag with tooltip-contents class.
This template is the tooltip-contents <span> tag with content, which require advanced-tooltip to be listed in main element.
Based on Tooltips from Fandom Developers Wiki, using modified JS script from MediaWiki:Common.js and simplified styling in MediaWiki:Common.css.
Inside main element (tag) with advanced-tooltip class, type: {{tooltip|<header>|<content>}}.
Simple example:
[ <span class="advanced-tooltip" style="text-align: center; font-size: 110%;">{{tooltip|Tooltip|[[File:Eff_icon_daze.png|left|40px]]This is an ''example''. <br>Looks '''''nice''''', isn't?}}Hover over me.</span> ]
[ Tooltip
This is an example.
Look nice, isn't?
Hover over me.
In example bellow is Template:CC, which uses advanced-tooltip class and this template.
Code in the CC template:
<span class="advanced-tooltip" style="..." > ...
{{tooltip|SLOW|Reduces movement speed by ''20%''. <br>'''MAJOR SLOW''' ''(30%)'' and '''MASSIVE SLOW''' ''(60%)'' are more powerful.}} ... </span>
Example of using CC template:
{{CC|slow|major slow}}
Results (hover over word or icon):
Reduces movement speed by 20%.
MAJOR SLOW (30%) and MASSIVE SLOW (60%) are more powerful.
major slow