Template:DidYouKnow/doc

This template is used to display a mobile-friendly "did you know" button with an accompanying popup. Currently, only English is supported.


 * See installation instructions or the template shall not work.

Installation
This template relies on CSS to function. Before copying-away, make sure to have an Administrator add this line to the top of MediaWiki:Common.css: The font import is used to give flair to the button. It is optional, and interchangeable, provided that  has its font family updated in site CSS to match whatever replacement is used.

Example


Parameter notes

 * short — This template will transform long inputs into a "page"-format that can extend as far downward as desired, but it does this purely by detecting the amount of characters in the main parameter. If, for example, your input is short but uses a lot of wikitext (such as piped links or markup), then it can trigger the page format when you may prefer it to be smaller. To do this, simply use the format.
 * Note: When true, if the input exceeds the "short" height, then the template will transform into a scrollbox. You may desire to use this parameter purely for the scroll function, such as if the DidYouKnow content is longer than the page itself and is at risk of being clipped; however, it is still strongly recommended that DidYouKnow only contain useful tidbit information, and should be considerably shorter than the article in which it is utilized.
 * 1 — the main parameter, if the input is over 300 characters long, the "page" format will gain a folded corner at the bottom right, purely for style.
 * mode — If set to, i.e.  , then all other length settings and parameters are overridden; the page-layout with folded corner is forced always, and the button will transform into a small icon with no text, instead replaced with &#128161; (desktop only). Further, this element makes the entire element more portable, able to fit inside containers such as Portable Infobox fields.
 * Note: If used inside Portable Infoboxes, this mode is forced always regardless of whether it is specified via template parameter. Additionally, within Portable Infoboxes a max-height is force-applied so that the element doesn't get too big when clicked, turning the element into a scrollbox.

Options
For those who dislike the default "pulsing" behavior of the button, you may edit the core template to add " " to the  parameter of the parent  ; ergo, the attribute should look like   if done properly. Instead of pulsing, the template will now "grow" slightly on hover. Simply remove " " to restore the pulse mode.

Desktop vs mobile
In desktop, the button is a right-floated element that pulses to draw the eye (unless changed with settings), drawing its coloration from ThemeDesigner CSSVariables. Inside Portable Infoboxes in desktop, or when declared via parameter, the text of this button will also be replaced by a small icon.

In mobile, the button always appears as a  which can be clicked to display the content directly beneath the button, which is surrounded by   tags. Text is always displayed, irrespective of settings.

CSS class documentation
{   "params": { "1": {           "label": "1", "description": "Main parameter, the popup text itself.", "type": "content" },       "short": { "description": "If \"true\", the template will not expand to accommodate long-form content, instead using a scrollbox.", "type": "boolean", "label": "short" },       "mode": { "description": "If set to \"icon\", transforms into a more portable version of the existing functionality.", "label": "mode", "type": "string" }   },    "description": "Creates a mobile-friendly \"Did you know?\" button that will display a popup of text when clicked. Floated to the right in desktop.", "format": "inline" }
 * This is only useful if you wish to theme this template.
 * — parent class.
 * — changes desktop pulsation behavior.
 * — changes desktop behavior to be more portable.
 * — parent class of the button that is clicked, the "outer" button.
 * — inner button, containing its text.
 * — sibling of, absolutely positioned flex parent that allows its sibling classes to expand leftward as more text is added, up to a maximum width.
 * — contains the absolutely positioned text.
 * — contains a "copy" of the output that doesn't appear in mobile and is hidden in desktop, "beneath" the regular output on the z-axis. This allows its parent contains to maintain the proper dimensionality even while the regular output is raised upward on the z-axis with absolute positioning.
 * — the main output, absolutely positioned so that it can spill over the body class if it needs to.