Template:Hover: Difference between revisions
Jump to navigation
Jump to search
m (use width of -1px (best fit) by default) |
m (default width of 150px for text since -1px does not do anything for text as it does with images; removed assumption of "px" unit from "width") |
||
| 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|- | <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|}}}|∅|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"). | </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"). | ||
You have the following additional options if providing a text popup: | You have the following additional options if providing a text popup: | ||
*Specifying a "width" parameter will determine the width of the box within which your popup text will be wrapped | *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. | ||
You have the following additional options if providing an image popup: | You have the following additional options if providing an image popup: | ||
*You can specify "width" ( | *You can specify "width" (with the unit, e.g. "500px"). This allows you to scale the image up or down. | ||
*You can add a "link" parameter and the image will be clickable, leading to the page of your choice. | *You can add a "link" parameter and the image will be clickable, leading to the page of your choice. | ||
Revision as of 23:31, 2 December 2023
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 "[[Image:__]]" 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").
You have the following additional options if providing a text popup:
- 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.
You have the following additional options if providing an image popup:
- You can specify "width" (with the unit, e.g. "500px"). This allows you to scale the image up or down.
- 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.
Samples:
{{Hover|Blam!|text=Oni crashed|bgcolor=#C0C0C0}}
yields
Blam!Oni crashed
{{Hover|Blame!|image=Buramu!.jpg|link=Blame|secret=yes}}
yields