Template:Tt: Difference between revisions

Template page
m (Re-enable tooltips, they seem to be working with MinervaNeue)
Tags: mobile edit mobile web edit
m (add warning about inline behavior with text)
 
Line 25: Line 25:
|No underline|<pre style="text-align:left">{{tt|Normal text without underline|Tooltip text|line=false}}</pre>Tooltip text
|No underline|<pre style="text-align:left">{{tt|Normal text without underline|Tooltip text|line=false}}</pre>Tooltip text
|line=false
|line=false
}} '''&middot;'''
}}
{{tt
{{tt
|Left-aligned text|<pre style="text-align:left">{{tt|left-aligned text|Tooltip text|text-align=left}}</pre>Tooltip text
|Left-aligned text|<pre style="text-align:left">{{tt|left-aligned text|Tooltip text|text-align=left}}</pre>Tooltip text
|text-align=left
|text-align=left
}} '''&middot;'''
}}
{{tt
{{tt
|{{tt|Nested tooltip|Bottom text}}
|{{tt|Nested tooltip|Bottom text}}
Line 40: Line 40:
{{tt
{{tt
|Horizontal Rule|<pre style="text-align:left">{{tt|Tooltip text with horizontal rule|Tooltip<hr>Text}}</pre><hr>Tooltip Text
|Horizontal Rule|<pre style="text-align:left">{{tt|Tooltip text with horizontal rule|Tooltip<hr>Text}}</pre><hr>Tooltip Text
}} '''&middot;'''
}}
{{tt
{{tt
|Links|<pre style="text-align:left">{{tt|left-aligned text|[[Main Page|existing link]].}}</pre>Tooltip [[new link]] and [[Main Page|existing link]].
|Links|<pre style="text-align:left">{{tt|left-aligned text|[[Main Page|existing link]].}}</pre>Tooltip [[new link]] and [[Main Page|existing link]].
}} '''&middot;'''
}}
{{tt|Highlights
{{tt|Highlights
|<pre style="text-align:left">{tt|Highlights|{{h|test}}}}</pre>{{h|test}}<br>(ref [[Template:H]])
|<pre style="text-align:left">{tt|Highlights|{{h|test}}}}</pre>{{h|test}}<br>(ref [[Template:H]])
}} '''&middot;'''
}}
{{tt
{{tt
|Images|<pre style="text-align:left;">{{tt|Images|[[File:BlazBlue Central Fiction Logo.png]]}</pre>[[File:BlazBlue Central Fiction Logo.png]]
|Images|<pre style="text-align:left;">{{tt|Images|[[File:BlazBlue Central Fiction Logo.png]]}</pre>[[File:BlazBlue Central Fiction Logo.png]]
Line 52: Line 52:


===Warnings===
===Warnings===
This template is best used completely inline (i.e. without newlines, or with the newline commented out like so: <code><nowiki><!-- commented out stuff goes in here --></nowiki></code>). This is because a newline after the normal text will be rendered as an underlined space (e.g."{{tt|Text |Tooltip}}" instead of "{{tt|Text|Tooltip}}").<p></p>
 
With the 1.32 mediawiki update, tooltips no longer work well in text. They will appear inline when multiple tooltips are placed next to each other, but if text is placed around it, each piece of text is displayed as its own paragraph (see below starting at e.g.).
 
This template is best used completely inline (i.e. without newlines, or with the newline commented out like so: <code><nowiki><!-- commented out stuff goes in here --></nowiki></code>). This is because a newline after the normal text will be rendered as an underlined space (e.g."{{tt|Text |Tooltip}}" instead of "{{tt|Text|Tooltip}}").


{{tt|Wrong
{{tt|Wrong
Line 59: Line 62:
|Tooltip}}
|Tooltip}}
</nowiki></pre>Tooltip
</nowiki></pre>Tooltip
}} '''&middot;'''
}}
{{tt|Right<!--
{{tt|Right<!--
-->|<pre style="text-align:left"><nowiki>
-->|<pre style="text-align:left"><nowiki>

Latest revision as of 17:04, 12 August 2019

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
{{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
{tt|Highlights|{{h|test}}}}
test
(ref Template:H)
Images
{{tt|Images|[[File:BlazBlue Central Fiction Logo.png]]}
BlazBlue Central Fiction Logo.png

Warnings

With the 1.32 mediawiki update, tooltips no longer work well in text. They will appear inline when multiple tooltips are placed next to each other, but if text is placed around it, each piece of text is displayed as its own paragraph (see below starting at e.g.).

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