Template:Tooltip: Difference between revisions

Content deleted Content added

Inline

Revision as of 10:10, 30 June 2026

   {{{1}}}
   
       {{{2}}}

@@ Line 1: / Line 1: @@
+<span style="position: relative; display: inline-block; cursor: help; border-bottom: 1px dashed #666;" class="mw-custom-toggle-button">
-<style>
+    {{{1}}}
-/* Base container styling */
+    <span style="visibility: hidden; position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%); background-color: #222; color: #fff; text-align: center; padding: 6px 10px; border-radius: 4px; font-size: 0.9em; white-space: nowrap; z-index: 100; box-shadow: 0px 2px 5px rgba(0,0,0,0.3); opacity: 0; transition: opacity 0.2s ease-in-out;" class="mw-custom-toggle-content">
-.custom-tooltip {
-    position: relative;
+        {{{2}}}
+    </span>
-    display: inline-block;
+</span>
-    cursor: help;
-}
-/* Style the text you hover over */
-.tooltip-trigger {
-    border-bottom: 1px dashed #666;
-}
-/* Hide the tooltip text by default and set styling */
-.custom-tooltip .tooltip-content {
-    visibility: hidden;
-    position: absolute;
-    bottom: 125%; /* Positions it above the text */
-    left: 50%;
-    transform: translateX(-50%);
-    background-color: #222; /* Dark background */
-    color: #fff;            /* White text */
-    text-align: center;
-    padding: 6px 10px;
-    border-radius: 4px;
-    font-size: 0.9em;
-    white-space: nowrap;
-    z-index: 100;
-    box-shadow: 0px 2px 5px rgba(0,0,0,0.3);
-    opacity: 0;
-    transition: opacity 0.2s ease-in-out;
-}
-/* Create a small arrow pointing down under the tooltip box */
-.custom-tooltip .tooltip-content::after {
-    content: "";
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    margin-left: -5px;
-    border-width: 5px;
-    border-style: solid;
-    border-color: #222 transparent transparent transparent;
-}
-/* Show the tooltip when hovering */
-.custom-tooltip:hover .tooltip-content {
-    visibility: visible;
-    opacity: 1;
-}
-</style><span class="custom-tooltip"><span class="tooltip-trigger">{{{1}}}</span><span class="tooltip-content">{{{2}}}</span></span>