Template:Tt: Difference between revisions

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

Options

Tooltip Styles

Preview what certain items will look like inside a tooltip.

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: ). This is because a newline after the normal text will be rendered as an underlined space (e.g."

" instead of "

").

@@ Line 1: / Line 1: @@
 <includeonly><!--
---><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><!--
+--><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><!--
 --></includeonly><noinclude>
 This is a template to help write tooltips. They can be hovered over or tapped to display the tooltip.
@@ Line 25: / Line 25: @@
 |No underline|<pre style="text-align:left">{{tt|Normal text without underline|Tooltip text|line=false}}</pre>Tooltip text
 |line=false
-}} '''&middot;'''
+}}
 {{tt
 |Left-aligned text|<pre style="text-align:left">{{tt|left-aligned text|Tooltip text|text-align=left}}</pre>Tooltip text
 |text-align=left
-}} '''&middot;'''
+}}
 {{tt
 |{{tt|Nested tooltip|Bottom text}}
@@ Line 40: / Line 40: @@
 {{tt
 |Horizontal Rule|<pre style="text-align:left">{{tt|Tooltip text with horizontal rule|Tooltip<hr>Text}}</pre><hr>Tooltip Text
-}} '''&middot;'''
+}}
 {{tt
 |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
 |<pre style="text-align:left">{tt|Highlights|{{h|test}}}}</pre>{{h|test}}<br>(ref [[Template:H]])
-}} '''&middot;'''
+}}
 {{tt
 |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===
-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
@@ Line 59: / Line 62: @@
 |Tooltip}}
 </nowiki></pre>Tooltip
-}} '''&middot;'''
+}}
 {{tt|Right<!--
 -->|<pre style="text-align:left"><nowiki>