moose-tooltip.scss

@mixin moose-tooltip($message) {
    position: relative;
    display: inline-block;
    text-decoration: underline dotted blue;
    &::before {
        opacity: 0;
    }
    &:hover::before {
        opacity: 1;
        font-size: 0.8rem;
        content: "ⓘ #{$message}";
        position: absolute;
        padding: 0.5em;
        bottom: 1.5rem;
        left: 20px;
        max-width: 20em;
        white-space: nowrap;
        border: 1px solid black;
        border-radius: .5em;
        background-color: white;
        box-shadow: 0 0 .2em grey;
    }
}