Просмотр кода страницы Шаблон:Hover info

<{{{el|span}}} class='hoverbox hover-info' style='position: relative'><!--
    -->{{{text|[[File:Info Simple bw.svg|16px|sub|link=]]}}}<!--
    --><{{{el|span}}} class=hoveritem style='position: absolute; top: 1em; left: -0.9em; 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}}}><!--
--></{{{el|span}}}><noinclude>
{{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>