FANDOM


Template documentation (for the above template, sometimes hidden or invisible) [view] [edit] [history] [refresh]

Description

This template is used to create a pop-up tooltip when the user's cursor hovers over specified content. It was designed to provide descriptions for Eternal's keywords and glossary terms.
Keywords with related terms, such as "Night" & "Nightfall" or "Revenge" & "Destiny", should display the descriptions for both terms.

Syntax

Type {{KeywordHover|<keyword>}} on an article page, replacing <keyword> with the desired term.
You may also use the shortcut {{kh}} to place this template.

Parameters

This template has 3 main components - the displayed text, an indicator icon, and the hover tooltip. The following optional parameters may be used to customize these components:
text = custom text
By default, the first unnamed parameter is used for both the linked text and the described term in the popup. The 'text' parameter (or the second unnamed parameter) replaces the linked text with the custom text. Note that the custom text will still be linked to the original page in the first unnamed parameter, unless changed with the 'link' parameter.
link = custom link or "none"
The named 'link' parameter is used to change the link to the page specified in the parameter. If "none" is used, the link will be removed.
icon = custom icon
The default "(i)" text used for an icon may be replaced using the icon parameter. Note that this 'icon' is the actual point that must be hovered over to display the tooltip.
keywords = keyword1, keyword2
tooltip = custom tooltip text
By default, the tooltip's content contains the description of the first unnamed parameter. This may be overwritten in 2 ways:
  • The tooltip parameter lets you specify the tooltip text
  • The keywords parameter allows multiple keywords' descriptions to be returned (separate each term with a comma).
Note that if using the tooltip or keywords parameters, the text parameter or an unnamed parameter will still need to specified for the initial article text.

Sample output

{{KeywordHover|Aegis}}
Aegis
{{KeywordHover|text=Custom text|Aegis}}
Custom text
{{KeywordHover|Aegis|icon={{Icon|f}}}}
Aegis
{{KeywordHover|Aegis|tooltip=Custom tooltip text}}
Aegis
{{KeywordHover|text=Custom text|tooltip=Custom tooltip text}}
[[|Custom text]]
{{KeywordHover|text=Multiple Keywords|keywords=Aegis, Night}}
[[|Multiple Keywords]]

Dependencies

Lua Modules - Module:HoverTooltip processes this template's parameters into the tooltip content. Its Keywords sub-module holds the keywords' descriptions.
CSS - Custom styles are used for the hover effect and display of the tooltips. This requires the following wiki CSS to work:
/* CSS tooltips */
 
/* Tooltip container */
/* re-uses existing containter for hoverCard links:  */
/*   .hoverLink { */
/*       position: relative; */
/*       display: inline-block; */
/*   } */
 
.hoverLink .hoverTooltip {

/* Tooltip text */
    border: thin solid #737383; !important;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border-radius: 6px;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
    background-color: #3a3941;
    width: 250px;
    box-sizing: border-box;
    padding: 5px 10px;
    opacity: 0;
    transition: opacity 0.35s;

/*   Re-size to page default (otherwise tooltips in infoboxes have smaller text) */
    font-size: initial;
 
    /* Position the tooltip text */
    visibility: hidden; 
    position: absolute;
    z-index: 99;
}
 
.hoverLink:hover .hoverTooltip {
/* Show the tooltip text when you mouse over the tooltip container */
    visibility: visible;
    opacity: 1;
}

Credit

Reuses some {{CardHover}} CSS with additional tooltip CSS modified from the Sacred Seasons 2 Wiki.
The above text is transcluded from Template:KeywordHover/doc; you can change it or view its history.
If you're done making changes, please refresh the text. (Why?)
You can experiment in this template's sandbox (edit | diff) and testcases (edit) pages.
Please add categories and interwikis to Template:KeywordHover/doc.
How does this work?Template Info: [usage] [subpages] [history]
Community content is available under CC-BY-SA unless otherwise noted.