Template:Tooltip: Difference between revisions

Revision as of 21:14, 1 January 2023

A template to write tooltips!

{{tt|Normal text|Tooltip text}}

Lorem ipsum, Normal textTooltip textPage Template:Tooltip/styles.css has no content., sed do dolore magna aliqua.

{{tt|Normal text without underline|Tooltip text|line=false}}

Normal text without underlineTooltip textPage Template:Tooltip/styles.css has no content.

{{tt|Tooltip text with horizontal rule|Tooltip<hr>Text}}

{{tt|{{tt|Nested tooltip|Bottom text}}|Top text}}

Nested tooltipBottom textPage Template:Tooltip/styles.css has no content.Top textPage Template:Tooltip/styles.css has no content.

{{tt|left-aligned text|Tooltip text|text-align=left}}

left-aligned textTooltip textPage Template:Tooltip/styles.css has no content.

Do not use <hr /> inside tooltips!
- Use <span class="hr"></span> instead.
- This is due to mw parser spawning random linebreaks if <hr /> is used.

A template to write tooltips!

Template parameters
This template prefers inline formatting of parameters.
Parameter		Description	Type	Status
Text	`1`	Text to be shown by normally.	String	required
Tooltip Text	`2`	Text to be shown in the tooltip when hovered.	String	required
Show Underline	`line`	Defaults to true. Set to false to hide the dotted underline.	Boolean	optional
Text Align	`text-align`	Overrides text-align style. Possible values: left, center, right, justify.	String	optional

@@ Line 1: / Line 1: @@
-<includeonly><span 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></span></includeonly><templatestyles src="Template:Main page/shared/styles.css"/><noinclude>
+<includeonly><span 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></span></includeonly><templatestyles src="Template:Tooltip/styles.css"/><noinclude>
 == What this is ==
 A template to write tooltips!