Difference between revisions of "Template:Tooltip"

From Tokyo Afterschool Summoners
Jump to navigation Jump to search
 
(12 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: auto;
   {{#ifeq:{{#var:expand tips|right}}|right|left: 0vh;|right: 0vh;}}
   right: 0;
}
 
@media only screen and (max-width: 600px) {
   .tooltip .tooltiptext {
    max-width: 150px;
  }
}
}


Line 24: Line 30:
   visibility: visible;
   visibility: visible;
}
}
}}<div class="tooltip">{{{1|{{{base|text}}}}}}<span class="tooltiptext" style="min-width: {{{width|0}}};">{{{2|{{{tip|{{{tooltip|tip}}}}}}}}}</span></div></includeonly></onlyinclude>
}}<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 elementElement dark.png

{{Tooltip|[[File:Element dark.png|50px]]|Nether element}}

Element dark.pngNether element

{{Tooltip|text1|text2|width=120px}}

text1text2