|
|
| (11 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:Multicombat.png|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; 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=]] Alabama</span><!--
| |
| --><span class='hoveritem'>[[File:Loudspeaker light blue.svg|13px|text-top|link=en-us-Alabama.ogg]] [[: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=]] Alabama</span><!--
| |
| --><span class='hoveritem'>[[File:Loudspeaker light blue.svg|13px|text-top|link=en-us-Alabama.ogg]] [[: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=]]&#x202F;{{{1|Alabama}}}</span><!--
| |
| --><span class='hoveritem'>[[File:Loudspeaker light blue.svg|13px|text-top|link={{{2|en-us-Alabama.ogg}}}]]&#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>
| |
{{{1}}}