Template:Hover info

From Wikibooks, open books for an open world
Jump to: navigation, search

Info Simple bw.svg {{{1}}} Type {{Hover info|text}} to display an “i” icon which expands to show a box with text when you hover over it.

Examples[edit]

  • Info Simple bw.svg This text will display when you hover over the “i” icon.: {{Hover info|This message will display when you hover over the “i” icon.}}
  • Pictogram voting question.svg Help text: {{Hover info|text=[[File:Pictogram voting question.svg|16px|sub|link=]]|Help text}}
  • Hover over me. This text will display when you hover over the “Hover over me” text.: {{Hover info|text=Hover over me|This message will display when you hover over the “Hover over me” text.}}

Subtemplate examples[edit]

This template can be used in more-specific templates.

Dashed text[edit]

More information  This message will display when you hover over the “More information” text.

{{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.}}}
}}

This would be used as {{hover text|More information|message}}.

Audio player[edit]

The state of
Loudspeaker light.svg AlabamaLoudspeaker light blue.svgAlabama
 
is known for ….
A longer player:
Loudspeaker light.svg AlabamaLoudspeaker light blue.svgAlabama
 
.
{{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)
}}

This would be used as:

<div>The state of {{hover audio|Alabama|en-us-Alabama.ogg}} is known for ….</div>
<div>A longer player: {{hover audio|Alabama|en-us-Alabama.ogg|size=300px}}.</div>

Dependencies[edit]