|
|
| (5 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| <!-- Template:Skill --> | | <!-- Template:Skill --> |
| {{#if:{{{name|}}}| | | {{#if:{{{name|}}}| |
| <div style="position:relative; display:inline-block; width:220px; height:80px; margin-left:10px;">
| | <div style="background-color:#191919; border:3px solid #4d4d4b; width:220px; height:80px; display:flex; align-items:center; justify-content:center; color:white; box-sizing:border-box; margin-left:10px;" > |
| <!-- Main skill box (your gray box) -->
| | {{{name}}} |
| <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> |
| |}} | | |}} |
