trusted
5,894
edits
Difference between revisions of "Template:Tooltip"
no edit summary
SurtrFan8511 (talk | contribs) |
SurtrFan8511 (talk | contribs) |
||
| (15 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 16: | Line 17: | ||
position: absolute; | position: absolute; | ||
z-index: 1; | z-index: 1; | ||
bottom: | 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> | ||