Template:Hover info: Difference between revisions

From Roat Pkz
Jump to navigation Jump to search
No edit summary
No edit summary
 
(16 intermediate revisions by the same user not shown)
Line 1: Line 1:
<{{{el|span}}} class='hoverbox hover-info' style='position: relative'><!--
<{{{el|span}}} class='hoverbox hover-info' style='position: relative'><!--
     -->{{{text|[[File:Multi.png|16px|sub|link=]]}}}<!--
     -->{{{text|[[File:Multicombat.png|sub|link=]]}}}<!--
     --><{{{el|span}}} class=hoveritem style='position: absolute; top: 1em; left: -0.9em; z-index: 1; {{{style|}}}'><!--
     --><{{{el|span}}} class=hoveritem style='position: absolute; top: -3em; left: 1em; z-index: 1; {{{style|}}}'><!--
         --><{{{el|span}}} style='display: block; margin: 0.6em 1em 0 1em; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid rgb(130, 130, 130); {{{arrow style|}}}' class=hover-info-arrow>&nbsp;</{{{el|span}}}><!--
         --><!--
         --><{{{el|span}}} style='display: block; border: solid 2px rgb(130, 130, 130); border-radius: 3px; background-color: white; box-shadow: 0 0 10px rgb(130, 130, 130); padding: 5px; margin: 0 0.5em 0.5em 0.5em; white-space: nowrap; {{{box style|}}}' class=hover-info-box>{{{1}}}</{{{el|span}}}><!--
         --><{{{el|span}}} style='display: block; border: solid 1px rgb(0, 0, 0); border-radius: 3px; background-color: #313e59; box-shadow: 0 0 4px rgb(0, 0, 0); padding: 5px; margin: 0 0.5em 0.5em 0.5em; white-space: nowrap; {{{box style|}}}' class=hover-info-box>{{{1}}}</{{{el|span}}}><!--
     --></{{{el|span}}}><!--
     --></{{{el|span}}}><!--
--></{{{el|span}}}><noinclude>
--></{{{el|span}}}>
{{documentation|content=
Type {{tlx|Hover info|text}} to display an “i” icon which expands to show a box with text when you hover over it.
 
== Examples ==
* {{Hover info|This text will display when you hover over the “i” icon.}}: {{tlx|Hover info|This message will display when you hover over the “i” icon.}}
* {{Hover info|text=[[File:Pictogram voting question.svg|16px|sub|link=]]|Help text}}: {{tlx|Hover info|2=text=<nowiki>[[File:Pictogram voting question.svg|16px|sub|link=]]</nowiki>|3=Help text}}
* {{Hover info|text=Hover over me.|This text will display when you hover over the “Hover over me” text.}}: {{tlx|Hover info|2=text=Hover over me|3=This message will display when you hover over the “Hover over me” text.}}
 
== Subtemplate examples ==
This template can be used in more-specific templates.
 
=== Dashed text ===
{{Hover info
| text = <span style='border-bottom: dashed thin black;'>More information</span>
| This message will display when you hover over the “More information” text.
}}
<pre>
{{Hover info
| text = <span style='border-bottom: dashed thin black;'>{{{1|More information}}}</span>
| {{{2|This message will display when you hover over the “More information” text.}}}
}}
</pre>
This would be used as <code><nowiki>{{hover text|More information|message}}</nowiki></code>.
 
=== Audio player ===
<div>The state of {{Hover info
| text = <span class='hoveritem selected'>[[File:Loudspeaker light.svg|13px|text-top|link=]]&#x202F;Alabama</span><!--
      --><span class='hoveritem'>[[File:Loudspeaker light blue.svg|13px|text-top|link=en-us-Alabama.ogg]]&#x202F;[[:File:en-us-Alabama.ogg|Alabama]]</span>
| 1 = [[File:en-us-Alabama.ogg|35px]]<!--
    --><div style='font-size: x-small; text-align: center; line-height: 1.2em; padding-top: 0.3em'>[[:File:en-us-Alabama.ogg|<span style='color: rgb(255, 255, 255)'>file info</span>]]</div>
| el = div
| style = top: 1.3em
| arrow style = margin-top: 0.3em
| box style = padding: 0; background-color: rgb(130, 130, 130)
}} is known for ….</div>
<div>A longer player: {{Hover info
| text = <span class='hoveritem selected'>[[File:Loudspeaker light.svg|13px|text-top|link=]]&#x202F;Alabama</span><!--
      --><span class='hoveritem'>[[File:Loudspeaker light blue.svg|13px|text-top|link=en-us-Alabama.ogg]]&#x202F;[[:File:en-us-Alabama.ogg|Alabama]]</span>
| 1 = [[File:en-us-Alabama.ogg|300px]]<!--
    --><div style='font-size: x-small; text-align: center; line-height: 1.2em; padding-top: 0.3em'>[[:File:en-us-Alabama.ogg|<span style='color: rgb(255, 255, 255)'>file info</span>]]</div>
| el = div
| style = top: 1.3em
| arrow style = margin-top: 0.3em
| box style = padding: 0; background-color: rgb(130, 130, 130)
}}.</div>
<pre>
{{Hover info
| text = <span class='hoveritem selected'>[[File:Loudspeaker light.svg|13px|text-top|link=]]&amp;#x202F;{{{1|Alabama}}}</span><!--
      --><span class='hoveritem'>[[File:Loudspeaker light blue.svg|13px|text-top|link={{{2|en-us-Alabama.ogg}}}]]&amp;#x202F;[[:{{{2|File:en-us-Alabama.ogg}}}|{{{1|Alabama}}}]]</span>
| 1 = [[File:{{{2|en-us-Alabama.ogg}}}|{{{size|45px}}}]]<!--
    --><div style='font-size: x-small; text-align: center; line-height: 1.2em; padding-top: 0.3em'>[[:File:{{{2|en-us-Alabama.ogg}}}|<span style='color: rgb(255, 255, 255)'>file info</span>]]</div>
| el = div
| style = top: 1.3em
| arrow style = margin-top: 0.3em
| box style = padding: 0; background-color: rgb(130, 130, 130)
}}
</pre>
This would be used as:
<pre><div>The state of {{hover audio|Alabama|en-us-Alabama.ogg}} is known for ….</div></pre>
<pre><div>A longer player: {{hover audio|Alabama|en-us-Alabama.ogg|size=300px}}.</div></pre>
 
== Dependencies ==
* [[MediaWiki:Common.css/Hoverbox.css]]
}}
[[Category:Note templates]]
</noinclude>

Latest revision as of 11:56, 5 June 2024

{{{1}}}