More actions
(create tooltip template & documentation) |
m (remove tooltip on mobile screens) |
||
| Line 1: | Line 1: | ||
<includeonly><!-- | <includeonly><!-- | ||
--><div class="tooltip" {{ #ifeq: {{{line|true}}} | false | style="border-bottom: 0;" }}>{{{1}}}<span class="tooltiptext" style="{{#if:{{{text-align|}}}|text-align:{{{text-align|default}}};}}">{{{2|}}}</span></div><!-- | --><div class="tooltip" {{ #ifeq: {{{line|true}}} | false | style="border-bottom: 0;" }}>{{{1}}}<span class="tooltiptext nomobile" style="{{#if:{{{text-align|}}}|text-align:{{{text-align|default}}};}}">{{{2|}}}</span></div><!-- | ||
--></includeonly><noinclude> | --></includeonly><noinclude> | ||
This is a template to help write tooltips. They can be hovered over or tapped to display the tooltip. | This is a template to help write tooltips. They can be hovered over or tapped to display the tooltip. | ||
Revision as of 22:25, 27 April 2018
This is a template to help write tooltips. They can be hovered over or tapped to display the tooltip.
Usage & Examples
{{tt|Normal text|Tooltip text (required)
|line=false (optional, "true" by default - see the "No underline" example below)
|text-align=left (optional, "center" by default - see the "Left-aligned text" example below)
}}
You can nest this template for two tooltips: one appears above and one below. See the "nested tooltip" example below.
{{tt|{{tt|Description|This tooltip appears below}}|This tooltip appears above}}
Default
{{tt|Normal text|Tooltip text}Tooltip text
Options
No underline
{{tt|Normal text without underline|Tooltip text|line=false}}Tooltip text
·
Left-aligned text
{{tt|left-aligned text|Tooltip text|text-align=left}}Tooltip text
·
Nested tooltipBottom text
{{tt|{{tt|Nested tooltip|Bottom text}}|Top text}}Top text
Tooltip Styles
Preview what certain items will look like inside a tooltip.
Horizontal Rule
Tooltip Text
{{tt|Tooltip text with horizontal rule|Tooltip<hr>Text}}Tooltip Text
·
Links
{{tt|left-aligned text|[[Main Page|existing link]].}}Tooltip new link and existing link.
·
Highlights
(ref Template:H)
{tt|Highlights|{{h|test}}}}test(ref Template:H)
·
Images
{{tt|Images|[[File:BlazBlue Central Fiction Logo.png]]}
Warnings
This template is best used completely inline (i.e. without newlines, or with the newline commented out like so: <!-- commented out stuff goes in here -->). This is because a newline after the normal text will be rendered as an underlined space (e.g."
Text Tooltip
" instead of "
TextTooltip
").
Wrong
{{tt|Wrong
|Tooltip}}
Tooltip
·
Right
{{tt|Right<!--
-->|Tooltip}}
Tooltip