User:C.Ezra.M/tooltip.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

.tooltip {
    cursor: help;
    text-decoration: underline dotted;
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    --width: clamp(60px,20ch,300px);
    width: var(--width,20ch);
    background: #111;
    color: #eee;
    padding: 5px 0;
    border-radius: 5px;
    text-align: center;
    position: absolute;
    z-index: 1;
    visibility: hidden;
    bottom: 100%;
    left: 50%;
    margin-left: calc(var(--width,120px) / -2);
    opacity: 0;
    transition: .3s;

    /* Reset properties */

    cursor: initial;
    font-weight: initial;
    font-style: initial;
    text-transform: initial;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* Triangle at the bottom */

.tooltiptext::after {
    content: ' ';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #111 transparent transparent transparent;
}

/* Link styling specifically for the tooltip text */
/* Internal links */

.tooltiptext a:link {color: #36b}
.tooltiptext a:visited {color: #636}
.tooltiptext a:active {color: #b63}

/* Interwiki/external */

.tooltiptext a.extiw:link, .tooltiptext a.external:link {color: #bce}
.tooltiptext a.extiw:visited, .tooltiptext a.external:visited {color: #b7b}
.tooltiptext a.extiw:active, .tooltiptext a.external:active {color: #da8}

/* Redlinks */

.tooltiptext a.new:link {color: #e66}
.tooltiptext a.new:visited {color: #c88}