Template:Hover: Difference between revisions

Latest revision as of 21:47, 16 April 2025

The Hover template is for creating text which, when hovered over with the mouse, pops up additional text or an image. The text which should be hovered over is given first as an unnamed parameter. Then you pass either the parameter "text" with the desired popup text or "image" with the name of an image (no "[[Image:__]]" wrapper, just the file name). You cannot use both parameters.

You have the following additional options for both text and image popups:

"padding" (specify the units, e.g. "3px") determines the inset margin of the box's content (default: 5px)
"bgcolor" sets the background color (e.g. "#0C0C0C" or "purple"); when used with an image popup, this creates a frame around the image with a width set by "padding" (default: white)
"width" (with the unit, e.g. "50px") will determine the width of the box within which your popup text will be wrapped; if displaying an image, it will be scaled proportionally to fit the given width (default: 150px for text, image's width for image)
"secret=yes" will avoid the underlining that indicates the presence of a hover text/image

You have the following additional option if providing a text popup:

"align" will set the alignment of the text (default: center)

You have the following additional option if providing an image popup:

You can add a "link" parameter and the image will be clickable, leading to the page of your choice

Samples:

{{Hover|Blam!|text=Blam, Oni crashed|bgcolor=#ede9d8}}
yields
Blam!Blam, Oni crashed

{{Hover|Blame!|image=Buramu!.jpg|bgcolor=red|padding=2px|link=Blame|secret=yes}}
yields
Blame!

@@ Line 1: / Line 1: @@
-<includeonly><span class="has_popup" style="border-bottom:{{#ifeq:{{{secret|no}}}|yes|none|1px dotted}};">{{{1}}}<span class="popup" style="z-index:5; width:{{{width|{{#if:{{{text|}}}|150px|-1px}} }}}; padding:{{{padding|5px}}}; background-color:{{{bgcolor|#FFFFFF}}}; border:1px solid #DDDDDD; top:14px; text-align:center;">{{#if:{{{image|}}}|[[Image:{{{image|Buramu!.jpg}}}|{{{width|-1px}}}|center|{{#if:{{{link|}}}|{{#ifeq:{{{link|}}}|&empty;|link=|link={{{link}}} }} }}]]|{{{text|No text supplied!}}} }}</span></span></includeonly><noinclude>The '''Hover''' template is for popping up text or an image under the cursor when some text is hovered over by the reader. The text which should be hovered over is given first as an unnamed parameter. Then you pass either the parameter "text" with the desired popup text or "image" with the name of an image (no "<nowiki>[[Image:__]]</nowiki>" wrapper, just the file name). You cannot use both parameters. You can also control the padding with "padding" (specify the units, e.g. "5px") and background color with "bgcolor" (e.g. "#0C0C0C").
+<includeonly><span class="has_popup" style="border-bottom:{{#ifeq:{{{secret|no}}}|yes|none|1px dotted}};">{{{1}}}<span class="popup" style="z-index:5; width:{{{width|{{#if:{{{text|}}}|150px|-1px}} }}}; padding:{{{padding|5px}}}; background-color:{{{bgcolor|#FFFFFF}}}; border:1px solid #DDDDDD; top:14px; text-align:{{{align|center}}};">{{#if:{{{image|}}}|[[Image:{{{image|Buramu!.jpg}}}|{{{width|-1px}}}|{{#if:{{{link|}}}|{{#ifeq:{{{link|}}}|&empty;|link=|link={{{link}}} }} }}]]|{{{text|No text supplied!}}} }}</span></span></includeonly><noinclude>
+The '''Hover''' template is for creating text which, when hovered over with the mouse, pops up additional text or an image. The text which should be hovered over is given first as an unnamed parameter. Then you pass either the parameter "text" with the desired popup text or "image" with the name of an image (no "<nowiki>[[Image:__]]</nowiki>" wrapper, just the file name). You cannot use both parameters.
-You have the following additional options if providing a text popup:
+You have the following additional options for both text and image popups:
-*Specifying a "width" parameter (with the unit, e.g. "50px") will determine the width of the box within which your popup text will be wrapped.
+*"padding" (specify the units, e.g. "3px") determines the inset margin of the box's content (default: 5px)
+*"bgcolor" sets the background color (e.g. "#0C0C0C" or "purple"); when used with an image popup, this creates a frame around the image with a width set by "padding" (default: white)
+*"width" (with the unit, e.g. "50px") will determine the width of the box within which your popup text will be wrapped; if displaying an image, it will be scaled proportionally to fit the given width (default: 150px for text, image's width for image)
+*"secret=yes" will avoid the underlining that indicates the presence of a hover text/image
-You have the following additional options if providing an image popup:
+You have the following additional option if providing a text popup:
-*You can specify "width" (with the unit, e.g. "500px"). This allows you to scale the image up or down.
+*"align" will set the alignment of the text (default: center)
-*You can add a "link" parameter and the image will be clickable, leading to the page of your choice.
-Pass a "secret" parameter with value "yes" to avoid the underlining that indicates the presence of a hover text/image.
+You have the following additional option if providing an image popup:
+*You can add a "link" parameter and the image will be clickable, leading to the page of your choice
 Samples:
-<tt><nowiki>{{Hover|Blam!|text=Oni crashed|bgcolor=#C0C0C0}}</nowiki></tt><br>
+<tt><nowiki>{{Hover|Blam!|text=Blam, Oni crashed|bgcolor=#ede9d8}}</nowiki></tt><br>
-yields<br>
+''yields''<br>
-{{Hover|Blam!|text=Oni crashed|bgcolor=#C0C0C0}}
+{{Hover|Blam!|text=Blam, Oni crashed|bgcolor=#ede9d8}}
-<tt><nowiki>{{Hover|Blame!|image=Buramu!.jpg|link=Blame|secret=yes}}</nowiki></tt><br>
+<tt><nowiki>{{Hover|Blame!|image=Buramu!.jpg|bgcolor=red|padding=2px|link=Blame|secret=yes}}</nowiki></tt><br>
-yields<br>
+''yields''<br>
-{{Hover|Blame!|image=Buramu!.jpg|link=Blame|secret=yes}}
+{{Hover|Blame!|image=Buramu!.jpg|bgcolor=red|padding=2px|link=Blame|secret=yes}}
 [[Category:Basic formatting templates]]</noinclude>