Difference between revisions of "Template:Tooltip"
Jump to navigation
Jump to search
SurtrFan8511 (talk | contribs) |
SurtrFan8511 (talk | contribs) |
||
| (11 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<includeonly><onlyinclude>{{#css: | <includeonly><onlyinclude>{{#if:{{#var:hide tips}}|{{{1|{{{base|text}}}}}}|{{#css: | ||
.tooltip { | .tooltip { | ||
position: relative; | position: relative; | ||
| Line 9: | Line 9: | ||
visibility: hidden; | visibility: hidden; | ||
width: max-content; | width: max-content; | ||
max-width: 300px; | |||
background-color: black; | background-color: black; | ||
color: #fff; | color: #fff; | ||
| Line 17: | Line 18: | ||
z-index: 1; | z-index: 1; | ||
bottom: 135%; | bottom: 135%; | ||
left: | {{#ifeq:{{#var:expand tips|right}}|right|left: 0vh;|right: 0vh;}} | ||
} | |||
@media only screen and (max-width: 600px) { | |||
.tooltip .tooltiptext { | |||
max-width: 150px; | |||
} | |||
} | } | ||
| Line 24: | Line 30: | ||
visibility: visible; | visibility: visible; | ||
} | } | ||
}}< | }}<span class="tooltip">{{{1|{{{base|text}}}}}}<span class="tooltiptext" style="min-width: {{{width|0}}};">{{{2|{{{tip|{{{tooltip|tip}}}}}}}}}</span></span>}}</includeonly></onlyinclude> | ||
<noinclude> | <noinclude> | ||
This template does the same thing as <code><nowiki><abbr></nowiki></code> tooltips, except that the tips can be viewed on mobile this time. | This template does the same thing as <code><nowiki><abbr></nowiki></code> tooltips, except that the tips can be viewed on mobile this time. | ||
You can hide tooltips on a page with <code><nowiki>{{#vardefine:hide tips|true}}</nowiki></code> | |||
You can make tooltips on a page expand to the left instead of the right with <code><nowiki>{{#vardefine:expand tips|left}}</nowiki></code> | |||
==Usage== | ==Usage== | ||
| Line 43: | Line 53: | ||
<pre>{{Tooltip|text1|text2|width=120px}}</pre> | <pre>{{Tooltip|text1|text2|width=120px}}</pre> | ||
{{Tooltip|text1|text2|width=120px}} | {{Tooltip|text1|text2|width=120px}} | ||
</noinclude> | </noinclude> | ||
Latest revision as of 08:02, 15 November 2020
This template does the same thing as <abbr> tooltips, except that the tips can be viewed on mobile this time.
You can hide tooltips on a page with {{#vardefine:hide tips|true}}
You can make tooltips on a page expand to the left instead of the right with {{#vardefine:expand tips|left}}
Usage
{{Tooltip|text1|text2}}
text1text2
{{Tooltip|base=text1|tip=text2}}
text1text2
{{Tooltip|Nether element|[[File:Element dark.png|50px]]}}
Nether element
{{Tooltip|[[File:Element dark.png|50px]]|Nether element}}
Nether element
{{Tooltip|text1|text2|width=120px}}
text1text2