Template:Skill: Difference between revisions

Revision as of 21:22, 30 August 2025

{{#if:|

   {{{name}}}

   Hover for description

 <style>
   div[style*="position:relative"]:hover div:last-child {
     visibility: visible !important;
   }
 </style>

|}

@@ Line 1: / Line 1: @@
 <!-- Template:Skill -->
 {{#if:{{{name|}}}|
-<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;" >
+<div style="position:relative; display:inline-block; margin-left:10px;">
-{{{name}}}
+  <!-- Existing skill box -->
+  <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;">
+    {{{name}}}
+  </div>
+  <!-- Tooltip -->
+  <div style="visibility:hidden; background-color:#222; color:white; text-align:left; border:2px solid #4d4d4b; padding:5px; border-radius:5px; width:200px; position:absolute; top:-5px; left:230px; z-index:100;">
+    {{{description|Hover for description}}}
+  </div>
+  <!-- CSS to show tooltip on hover -->
+  <style>
+    div[style*="position:relative"]:hover div:last-child {
+      visibility: visible !important;
+    }
+  </style>
 </div>
-|}}
+|}