Example of using SCSS for tool-tips (no javascript)

tool-tip.scss

// note that you'll need to edit out variables for this to work. Also, this isn't guaranteed to work!

@mixin moose-tooltip($message) {
    position: relative;
    display: inline-block;
    text-decoration: underline dotted $oc-blue-3;
    &::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 $dark-gray;
    }
}