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.
Inside main element (tag) with advanced-tooltip class, type: {{tooltip|<header>|<content>}}.
Usage
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> ]
Results:
[ 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):
SLOW Reduces movement speed by 20%. MAJOR SLOW(30%) and MASSIVE SLOW(60%) are more powerful.major slow
major slow
