Created page with "{{#css: .tooltip-short, .tooltip, .tooltip-long { position: relative; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; display: inline-block; color: #07f; } .tooltip-short:hover, .tooltip:hover, .tooltip-long:hover { color: #fff!important; cursor: pointer; } .tooltip-short a { position: absolute; display: block; visibility: hidden; opacity: 0; transition: all .3s; border-radius: 5px; box-shad..." |
fixed default parameters |
||
| Line 153: | Line 153: | ||
<span>{{{pre-inline-text}}} <div class="{{{type|tooltip}}}"><b>{{{text|tooltip}}}<span style="margin: 5px; display: block;height: auto; max-width: 250px;" border="0">[[{{{image|File:NoImage.png}}}]] {{{post-inline-text}}}</span></b></div> | <span>{{{pre-inline-text|}}} <div class="{{{type|tooltip}}}"><b>{{{text|tooltip}}}<span style="margin: 5px; display: block;height: auto; max-width: 250px;" border="0">[[{{{image|File:NoImage.png}}}]] {{{post-inline-text|}}}</span></b></div> | ||
Revision as of 07:41, 25 September 2023
Inline Tooltip Hover
Inserts text that has an image display on mouse hover, inline with other article text.
- Types
- tooltip-short : Intended for image HEIGHT less than 150px
- tooltip : Intended for image HEIGHT between 150px and 250px
- tooltip-long : Intended for image HEIGHT between 250px and 500px
Note: There is no tooltip type for tooltip images that with more than 500px height. The tooltip image will not be completely above the tooltip text in this case.
Usage
{{Inline Tooltip Hover
|type = [tooltip-short] or [tooltip] or [tooltip-long] defaults to tooltip if no class is included
|pre-inline-text = [text that goes before the tooltip] OPTIONAL
|hover-text = [text that the tooltip defines]
|post-inline-text = [text that goes after the tooltip] OPTIONAL
|image = [tooltip image file name]
}}
Example Usage
<span>Grants
{{Inline Tooltip Hover
|pre-inline-text = Grants
|text = Quick Reflexes
|post-inline-text = .
|image = Image:SF CoE Ability Quick Reflexes.png
}}
</span>
Example Preview
Grants
Template Markup
