Template:Skill: Difference between revisions
imported>DupingToaster No edit summary |
imported>DupingToaster No edit summary |
||
| Line 1: | Line 1: | ||
<!-- Template:Skill --> | <!-- Template:Skill --> | ||
{{#if:{{{name|}}}| | {{#if:{{{name|}}}| | ||
<div style="background-color:#191919; border:3px solid #4d4d4b; width: | <div style="position:relative; display:inline-block; width:220px; height:80px; margin-left:10px;"> | ||
{{{ | <!-- Main skill box (your gray box) --> | ||
<div style="background-color:#191919; border:3px solid #4d4d4b; width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:white; box-sizing:border-box;"> | |||
{{{name}}} | |||
</div> | |||
<!-- Tooltip box --> | |||
<div style="visibility:hidden; position:absolute; top:0; left:230px; width:200px; background-color:#222; color:white; border:2px solid #4d4d4b; border-radius:5px; padding:5px; box-sizing:border-box;"> | |||
{{{description|Hover for description}}} | |||
</div> | |||
<!-- Invisible overlay to trigger hover --> | |||
<div style="position:absolute; top:0; left:0; width:100%; height:100%;" | |||
onmouseover="this.parentNode.querySelector('div:nth-child(2)').style.visibility='visible'" | |||
onmouseout="this.parentNode.querySelector('div:nth-child(2)').style.visibility='hidden'"> | |||
</div> | |||
</div> | </div> | ||
|}} | |}} | ||
Revision as of 21:28, 30 August 2025