Template:Sandbox/Aurelain/Hint: Difference between revisions
No edit summary |
No edit summary |
||
| (32 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<includeonly><!-- | <includeonly><!-- | ||
--><templatestyles src="Template:Sandbox/Aurelain/Hint/styles.css" /><!-- | --><templatestyles src="Template:Sandbox/Aurelain/Hint/styles.css" /><!-- | ||
--><span class="wiki-hint {{# | --><span class="wiki-hint <!-- | ||
-->{{{1}}}<span class="wiki-hint-floating">{{{2}}}</span><!-- | -->wiki-hint-{{{side|top}}} <!-- | ||
-->{{#ifexpr: {{#ifeq: {{#pos: {{{1|}}} | File }}||0|1}} or {{{underline|1}}}=0 | |||
|wiki-hint-no-border}}<!-- | |||
-->"<!-- | |||
-->><!-- | |||
-->{{{1}}}<span class="wiki-hint-floating {{{class|}}}" style="{{{style|}}}">{{{2}}}</span><!-- | |||
--></span><!-- | --></span><!-- | ||
################################################################################ | ################################################################################ | ||
| Line 10: | Line 15: | ||
* It's instant upon hover (has no delay) | * It's instant upon hover (has no delay) | ||
* It uses a skin customized for Olden Era | * It uses a skin customized for Olden Era | ||
* Wraps the text if too long | |||
* Can be placed top/left/right/bottom. Defaults to "top". | |||
== Usage == | == Usage == | ||
1. | 1. Basic: | ||
Input: <code><nowiki>{{Sandbox/Aurelain/Hint | Hello | World}}</nowiki></code> | {{Color|yellow|Input:}} <code><nowiki>{{Sandbox/Aurelain/Hint | Hello | World}}</nowiki></code> | ||
Output: {{Sandbox/Aurelain/Hint | Hello | World}} | {{Color|lime|Output:}} {{Sandbox/Aurelain/Hint | Hello | World}} | ||
---- | ---- | ||
2. | 2. With images. In such cases, the subtle underline is automatically removed. | ||
Input: <code><nowiki>{{Sandbox/Aurelain/Hint | [[File:Icon_Resource_Wood.png]] | Wood | {{Color|yellow|Input:}} <code><nowiki>{{Sandbox/Aurelain/Hint | [[File:Icon_Resource_Wood.png]] | Wood}}</nowiki></code> | ||
Output: {{Sandbox/Aurelain/Hint | [[File:Icon_Resource_Wood.png]] | Wood | 0}} | {{Color|lime|Output:}} {{Sandbox/Aurelain/Hint | [[File:Icon_Resource_Wood.png]] | Wood}} | ||
---- | |||
3. With a lot of text | |||
{{Color|yellow|Input:}} <code><nowiki>{{Sandbox/Aurelain/Hint | Lorem | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.}}</nowiki></code> | |||
{{Color|lime|Output:}} {{Sandbox/Aurelain/Hint | Lorem | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.}} | |||
---- | |||
4. Placed at the {{b|bottom}}: | |||
{{Color|yellow|Input:}} <code><nowiki>{{Sandbox/Aurelain/Hint | Hello | World | side=bottom}}</nowiki></code> | |||
{{Color|lime|Output:}} {{Sandbox/Aurelain/Hint | Hello | World | side=bottom}} | |||
---- | |||
5. Placed to the {{b|left}}: | |||
{{Color|yellow|Input:}} <code><nowiki>{{Sandbox/Aurelain/Hint | Hello | World | side=left}}</nowiki></code> | |||
{{Color|lime|Output:}} {{Sandbox/Aurelain/Hint | Hello | World | side=left}} | |||
---- | |||
6. Placed to the {{b|right}}: | |||
{{Color|yellow|Input:}} <code><nowiki>{{Sandbox/Aurelain/Hint | Hello | World | side=right}}</nowiki></code> | |||
{{Color|lime|Output:}} {{Sandbox/Aurelain/Hint | Hello | World | side=right}} | |||
---- | |||
7. With a custom {{b|style}} on the floating hint: | |||
{{Color|yellow|Input:}} <code><nowiki>{{Sandbox/Aurelain/Hint | Hello | World | style=max-width:none;width:300px}}</nowiki></code> | |||
{{Color|lime|Output:}} {{Sandbox/Aurelain/Hint | Hello | World | style=max-width:none;width:300px}} | |||
---- | |||
8. With a custom {{b|class}} on the floating hint: | |||
{{Color|yellow|Input:}} <code><nowiki>{{Sandbox/Aurelain/Hint | Hello | World | class=my-class}}</nowiki></code> | |||
{{Color|lime|Output:}} {{Sandbox/Aurelain/Hint | Hello | World | class=my-class}} | |||
---- | |||
9. With no underline ({{b|underline{{=}}0}}): | |||
{{Color|yellow|Input:}} <code><nowiki>{{Sandbox/Aurelain/Hint | Hello | World | underline=0}}</nowiki></code> | |||
{{Color|lime|Output:}} {{Sandbox/Aurelain/Hint | Hello | World | underline=0}} | |||
</noinclude> | </noinclude> | ||
Latest revision as of 08:43, 21 July 2026
A minor tooltip for short descriptions. As opposed to the "title" attribute, it has the following advantages:
- It's instant upon hover (has no delay)
- It uses a skin customized for Olden Era
- Wraps the text if too long
- Can be placed top/left/right/bottom. Defaults to "top".
Usage
1. Basic:
Input: {{Sandbox/Aurelain/Hint | Hello | World}}
Output: Hello World
2. With images. In such cases, the subtle underline is automatically removed.
Input: {{Sandbox/Aurelain/Hint | [[File:Icon_Resource_Wood.png]] | Wood}}
3. With a lot of text
Input: {{Sandbox/Aurelain/Hint | Lorem | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.}}
Output: Lorem Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
4. Placed at the bottom:
Input: {{Sandbox/Aurelain/Hint | Hello | World | side=bottom}}
Output: Hello World
5. Placed to the left:
Input: {{Sandbox/Aurelain/Hint | Hello | World | side=left}}
Output: Hello World
6. Placed to the right:
Input: {{Sandbox/Aurelain/Hint | Hello | World | side=right}}
Output: Hello World
7. With a custom style on the floating hint:
Input: {{Sandbox/Aurelain/Hint | Hello | World | style=max-width:none;width:300px}}
Output: Hello World
8. With a custom class on the floating hint:
Input: {{Sandbox/Aurelain/Hint | Hello | World | class=my-class}}
Output: Hello World
9. With no underline (underline=0):
Input: {{Sandbox/Aurelain/Hint | Hello | World | underline=0}}
Output: Hello World


