<div class="container">
    <div class="pytesNET">
        <a href="https://www.pytes.net" target="_blank">
            <img src="https://cdn.pytes.me/pytesnet-white.svg" />
            <div class="text">
                <span class="title">pytes<b>NET</b></span>
                <span class="subtitle">Tooltip Paradise</span>
            </div>
        </a>
    </div>
    
    <h1>Tooltip Positions</h1>
    <div class="example">
        <div class="example-button" data-tooltip="This Tooltip is on the Left" data-tooltip-config="left">
            Left Tooltip
        </div>
        <div class="example-button" data-tooltip="This Tooltip is on the Top" data-tooltip-config="top">
            Top Tooltip
        </div>
        <div class="example-button" data-tooltip="This Tooltip is on the Bottom" data-tooltip-config="bottom">
            Bottom Tooltip
        </div>
        <div class="example-button" data-tooltip="This Tooltip is on the Right" data-tooltip-config="right">
            Right Tooltip
        </div>
    </div>
    
    <h1>Tooltip Animations</h1>
    <div class="example">
        <div class="example-button" data-tooltip="This Tooltip Fades in" data-tooltip-config="fade,left">
            Fade Left
        </div>
        <div class="example-button" data-tooltip="This Tooltip Fades in" data-tooltip-config="fade">
            Fade Top
        </div>
        <div class="example-button" data-tooltip="This Tooltip Fades in" data-tooltip-config="fade,bottom">
            Fade Bottom
        </div>
        <div class="example-button" data-tooltip="This Tooltip Fades in" data-tooltip-config="fade,right">
            Fade Right
        </div>
    </div>
    
    <div class="example">
        <div class="example-button" data-tooltip="This Tooltip Eases in" data-tooltip-config="ease-in,left">
            Ease In, Left
        </div>
        <div class="example-button" data-tooltip="This Tooltip Eases in" data-tooltip-config="ease-in">
            Ease In, Top
        </div>
        <div class="example-button" data-tooltip="This Tooltip Eases in" data-tooltip-config="ease-in,bottom">
            Ease In, Bottom
        </div>
        <div class="example-button" data-tooltip="This Tooltip Eases in" data-tooltip-config="ease-in,right">
            Ease In, Right
        </div>
    </div>
    
    <div class="example">
        <div class="example-button" data-tooltip="This Tooltips Eases out" data-tooltip-config="ease-out,left">
            Ease Out, Left
        </div>
        <div class="example-button" data-tooltip="This Tooltips Eases out" data-tooltip-config="ease-out">
            Ease Out, Top
        </div>
        <div class="example-button" data-tooltip="This Tooltips Eases out" data-tooltip-config="ease-out,bottom">
            Ease Out, Bottom
        </div>
        <div class="example-button" data-tooltip="This Tooltips Eases out" data-tooltip-config="ease-out,right">
            Ease Out, Right
        </div>
    </div>
    
    <h1>Tooltip Colours</h1>
    <div class="example">
        <div class="example-button white" data-tooltip="This Tooltip is White" data-tooltip-config="fade,white">
            White
        </div>
        <div class="example-button black" data-tooltip="This Tooltip is Black" data-tooltip-config="fade,black">
            Black
        </div>
        <div class="example-button red" data-tooltip="This Tooltip is Red" data-tooltip-config="fade,red">
            Red
        </div>
        <div class="example-button orange" data-tooltip="This Tooltip is Orange" data-tooltip-config="fade,orange">
            Orange
        </div>
        <div class="example-button green" data-tooltip="This Tooltip is Green" data-tooltip-config="fade,green">
            Green
        </div>
        <div class="example-button blue" data-tooltip="This Tooltip is Blue" data-tooltip-config="fade,blue">
            Blue
        </div>
        <div class="example-button violet" data-tooltip="This Tooltip is Violet" data-tooltip-config="fade,violet">
            Violet
        </div>
    </div>
    
    <h1>Tooltip on Different Events</h1>
    <div class="example">
        <div class="example-button" data-tooltip="This Tooltips Eases out" data-tooltip-config="ease-out" 
            data-event-in="click" data-event-out="click">
            Tooltip on Click
        </div>
        
        <div class="example-button" data-tooltip="This Tooltips Eases out" data-tooltip-config="ease-out" 
            data-event-in="dblclick" data-event-out="click">
            Tooltip on Double Click
        </div>
    </div>
</div>
// Color Variables
@white:     #FFFFFF;
@black:     #202428;
@red:       #DC4B46;
@orange:    #DC9650;
@green:     #19C878;
@blue:      #4B64C8;
@violet:    #A53278;

// Core Design
*, *:before, *:after{
    box-sizing: inherit;
    -moz-box-sizing: inherit;
    -webkit-box-sizing: inherit;
}
html, body{
    color: @white;
    margin: 0;
    padding: 0;
    display: block;
    font-size: 14px;
    line-height: 1.5;
    font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: @black;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
h1{
    color: @white;
    margin: 15px 0 30px 0;
    padding: 10px 15px;
    font-size: 32px;
    line-height: 42px;
    font-weight: 400;
    font-weight: 300;
    border-bottom: 1px solid fadeout(@white, 75%);
}
.container{
    width: 650px;
    margin: 50px auto;
    padding: 0;
    display: block;
    text-align: center;
}
.pytesNET{
    width: auto;
    margin: 0 0 15px 0;
    padding: 0;
    display: inline-block;
    text-align: left;
    background-color: #101418;
    border: 1px solid #101418;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    transition: border 142ms linear, background 142ms linear;
    -moz-transition: border 142ms linear, background 142ms linear;
    -webkit-transition: border 142ms linear, background 142ms linear;
    
    &:hover{
        background-color: #468296;
        text-shadow: -1px -1px 0 darken(#468296, 15%);
        border-color: lighten(#468296, 15%);
    }
    a{
        width: auto;
        margin: 0;
        padding: 10px 15px;
        display: block;
        vertical-align: top;
        text-decoration: none;
        
        img{
            width: 60px;
            height: auto;
            display: inline-block;
            vertical-align: top;
        }
        div{
            width: auto;
            margin: 0 0 0 15px;
            padding: 0;
            display: inline-block;
            vertical-align: top;
            
            span{
                font-weight: 300;
                display: block;
                vertical-align: top;

                &.title{
                    color: fadeout(@white, 15%);
                    font-size: 22px;
                }
                &.subtitle{
                    color: fadeout(@white, 35%);
                    font-size: 16px;
                }
            }
        }
    }
}
.example{
    width: 100%;
    margin: 0;
    padding: 30px 0;
    display: block;

    .example-button{
        cursor: pointer;
        color: fadeout(@white, 15%);
        margin: 10px;
        padding: 10px 15px;
        display: inline-block;
        background-color: darken(@black, 7%);
        border: 1px solid fadeout(@white, 75%);
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        box-shadow: 0 1px 1px 0 darken(@black, 7%);
        -moz-box-shadow: 0 1px 1px 0 darken(@black, 7%);
        -webkit-box-shadow: 0 1px 1px 0 darken(@black, 7%);

        &.white{
            color: @black;
            background-color: @white;
            border-color: @white;
        }
        &.black{
            color: @white;
            background-color: lighten(@black, 5%);
            border-color: lighten(@black, 12%);
        }
        &.red{
            color: @white;
            background-color: @red;
            border-color: lighten(@red, 15%);
        }
        &.orange{
            color: @white;
            background-color: @orange;
            border-color: lighten(@orange, 15%);
        }
        &.green{
            color: @white;
            background-color: @green;
            border-color: lighten(@green, 15%);
        }
        &.blue{
            color: @white;
            background-color: @blue;
            border-color: lighten(@blue, 15%);
        }
        &.violet{
            color: @white;
            background-color: @violet;
            border-color: lighten(@violet, 15%);
        }
    }
}

// Tooltip Design
*[data-tooltip]{
   cursor: pointer;
}
.tooltip{
    width: auto;
    margin: 0;
    padding: 10px 15px;
    opacity: 1.0;
    z-index: 999;
    display: inline-block;
    opacity: 0;
    position: absolute;
    font-size: 12px;
    line-height: 1.25;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    
    &.show{
        opacity: 1.0;
    }
    &:after{
        width: 0;
        height: 0;
        content: "";
        display: block;
        position: absolute;
    }

    // Tooltip Positions
    &.tooltip-top{
        &:after{
            top: 100%;
            left: 50%;
            margin: 0 0 0 -10px;
            border-width: 10px 10px 0 10px;
            border-style: solid;
            border-color: @white transparent transparent transparent;
        }
    }
    &.tooltip-left{
        &:after{
            top: 50%;
            left: 100%;
            margin: -10px 0 0 0;
            border-width: 10px 0 10px 10px;
            border-style: solid;
            border-color: transparent transparent transparent @white;
        }
    }
    &.tooltip-right{
        &:after{
            top: 50%;
            left: -10px;
            margin: -10px 0 0 0;
            border-width: 10px 10px 10px 0;
            border-style: solid;
            border-color: transparent @white transparent transparent;
        }
    }
    &.tooltip-bottom{
        &:after{
            top: -10px;
            left: 50%;
            margin: 0 0 0 -10px;
            border-width: 0 10px 10px 10px;
            border-style: solid;
            border-color: transparent transparent @white transparent;
        }
    }

    // Tooltip Colors
    &.tooltip-red{
        color: @white;
        background-color: @red;

        &.tooltip-top:after{
            border-top-color: @red;
        }
        &.tooltip-left:after{
            border-left-color: @red;
        }
        &.tooltip-right:after{
            border-right-color: @red;
        }
        &.tooltip-bottom:after{
            border-bottom-color: @red;
        }
    }
    &.tooltip-orange{
        color: @white;
        background-color: @orange;

        &.tooltip-top:after{
            border-top-color: @orange;
        }
        &.tooltip-left:after{
            border-left-color: @orange;
        }
        &.tooltip-right:after{
            border-right-color: @orange;
        }
        &.tooltip-bottom:after{
            border-bottom-color: @orange;
        }
    }
    &.tooltip-green{
        color: @white;
        background-color: @green;

        &.tooltip-top:after{
            border-top-color: @green;
        }
        &.tooltip-left:after{
            border-left-color: @green;
        }
        &.tooltip-right:after{
            border-right-color: @green;
        }
        &.tooltip-bottom:after{
            border-bottom-color: @green;
        }
    }
    &.tooltip-blue{
        color: @white;
        background-color: @blue;

        &.tooltip-top:after{
            border-top-color: @blue;
        }
        &.tooltip-left:after{
            border-left-color: @blue;
        }
        &.tooltip-right:after{
            border-right-color: @blue;
        }
        &.tooltip-bottom:after{
            border-bottom-color: @blue;
        }
    }
    &.tooltip-violet{
        color: @white;
        background-color: @violet;

        &.tooltip-top:after{
            border-top-color: @violet;
        }
        &.tooltip-left:after{
            border-left-color: @violet;
        }
        &.tooltip-right:after{
            border-right-color: @violet;
        }
        &.tooltip-bottom:after{
            border-bottom-color: @violet;
        }
    }
    &.tooltip-black{
        color: @white;
        background-color: darken(@black, 7%);

        &.tooltip-top:after{
            border-top-color: darken(@black, 7%);
        }
        &.tooltip-left:after{
            border-left-color: darken(@black, 7%);
        }
        &.tooltip-right:after{
            border-right-color: darken(@black, 7%);
        }
        &.tooltip-bottom:after{
            border-bottom-color: darken(@black, 7%);
        }
    }
    &.tooltip-white{
        color: @black;
        background-color: darken(@white, 3%);

        &.tooltip-top:after{
            border-top-color: darken(@white, 3%);
        }
        &.tooltip-left:after{
            border-left-color: darken(@white, 3%);
        }
        &.tooltip-right:after{
            border-right-color: darken(@white, 3%);
        }
        &.tooltip-bottom:after{
            border-bottom-color: darken(@white, 3%);
        }
    }

    // Animation :: Blank
    &.tooltip-blank{
        opacity: 0;
        
        &.show{
            opacity: 1.0;
        }
    }

    // Animation :: Fade
    &.tooltip-fade{
        opacity: 0;
        transition: opacity 142ms linear;
        -moz-transition: opacity 142ms linear;
        -webkit-transition: opacity 142ms linear;
        
        &.show{
            opacity: 1.0;
        }
    }

    // Animation :: Ease-In
    &.tooltip-ease-in{
        transition: margin 142ms linear, opacity 142ms linear;
        -moz-transition: margin 142ms linear, opacity 142ms linear;
        -webkit-transition: margin 142ms linear, opacity 142ms linear;

        &.tooltip-top{
            margin: -25px 0 0 0;
        }
        &.tooltip-left{
            margin: 0 0 0 -25px;
        }
        &.tooltip-right{
            margin: 0 0 0 25px;
        }
        &.tooltip-bottom{
            margin: 25px 0 0 0;
        }
        &.tooltip-top.show,
        &.tooltip-left.show,
        &.tooltip-right.show,
        &.tooltip-bottom.show{
            margin: 0;
        }
    }

    // Animation :: Ease-Out
    &.tooltip-ease-out{
        opacity: 0;
        transition: margin 142ms linear, opacity 142ms linear;
        -moz-transition: margin 142ms linear, opacity 142ms linear;
        -webkit-transition: margin 142ms linear, opacity 142ms linear;

        &.show{
            margin: 0;
            opacity: 1.0;
        }
        &.tooltip-top{
            margin: 15px 0 0 0;
        }
        &.tooltip-left{
            margin: 0 0 0 15px;
        }
        &.tooltip-right{
            margin: 0 0 0 -15px;
        }
        &.tooltip-bottom{
            margin: -15px 0 0 0;
        }
        &.tooltip-top.show,
        &.tooltip-left.show,
        &.tooltip-right.show,
        &.tooltip-bottom.show{
            margin: 0;
        }
    }
}
View Compiled
var toolID = 0, tooltip = function(ev){
    var _in = this.getAttribute("data-event-in") || "mouseenter";
    var _out = this.getAttribute("data-event-out") || "mouseleave";
    var action = (_in == _out)? !this.hasAttribute("data-tooltip-id"): (ev.type == _in);

    // Show Tooltip
    if(action){
        var config = {
            color: "white", 
            position: "top", 
            animation: "blank", 
            classNames: ""
        }, tip, pos;

        if(!this.hasAttribute("data-tooltip-id")){
            if(this.hasAttribute("data-tooltip-config")){
                this.getAttribute("data-tooltip-config").split(",").forEach(function(item){
                    if(["white", "black", "red", "orange", "green", "blue", "violet"].indexOf(item) >= 0){
                        config.color = item;
                    } else if(["top", "left", "right", "bottom"].indexOf(item) >= 0){
                        config.position = item;
                    } else if(["blank", "fade", "ease-in", "ease-out"].indexOf(item) >= 0){
                        config.animation = item;
                    } else {
                        config.classNames += " " + item;
                    }
                });
            }
            tip = document.createElement("DIV");
            tip.id = "tooltip-" + ++toolID;
            tip.innerHTML = this.getAttribute("data-tooltip");
            tip.className = "tooltip tooltip-" + config.color + " tooltip-" + config.position + " "
                          + "tooltip-" + config.animation + config.classNames;
            document.body.appendChild(tip);

            pos = function(element){
                var position = {
                    top:    element.offsetTop    || 0,
                    left:   element.offsetLeft   || 0,
                    width:  element.offsetWidth  || 0,
                    height: element.offsetHeight || 0
                };
                while(element = element.offsetParent){
                    position.top  += element.offsetTop;
                    position.left += element.offsetLeft;
                }
                return position;
            }(this);
            switch(config.position){
                case "left":
                    tip.style.top = (pos.top + (pos.height/2) - (tip.offsetHeight/2)) + "px";
                    tip.style.left = (pos.left - tip.offsetWidth - 10) + "px";
                    break;
                case "right":
                    tip.style.top = (pos.top + (pos.height/2) - (tip.offsetHeight/2)) + "px";
                    tip.style.left = (pos.left + pos.width + 10) + "px";
                    break;
                case "bottom":
                    tip.style.top = (pos.top + pos.height + 10) + "px";
                    tip.style.left = (pos.left + (pos.width / 2) - (tip.offsetWidth / 2)) + "px";
                    break;
                default:
                    tip.style.top = (pos.top - tip.offsetHeight - 10) + "px";
                    tip.style.left = (pos.left + (pos.width / 2) - (tip.offsetWidth / 2)) + "px";
                    break;
            }
            this.setAttribute("data-tooltip-id", "tooltip-" + toolID);
        }
        (function(id){
            setTimeout(function(){ document.querySelector("#" + id).className += " show" }, 25);
        }(this.getAttribute("data-tooltip-id")));
        return;
    }

    // Hide Tooltip
    var tip = document.querySelector("#" + this.getAttribute("data-tooltip-id"));
    tip.className = tip.className.replace(/(?:^|\s+)(show)(?:\s+|$)/, "");
    this.removeAttribute("data-tooltip-id");
    (function(e){
        setTimeout(function(){ e.parentElement.removeChild(e); }, 200);
    })(tip);
    return;
};

// Init
document.addEventListener("DOMContentLoaded", function(){
    [].forEach.call(document.querySelectorAll("[data-tooltip]"), function(item){
        item.addEventListener(item.getAttribute("data-event-in") || "mouseenter", tooltip);
        item.addEventListener(item.getAttribute("data-event-out") || "mouseleave", tooltip);
    });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.