tooltip.js

var
    MNR_ARRAY_TOOLTIPS = document.querySelectorAll("[data-mnr-tooltip]"),
    MNR_BODY = document.querySelector("body"),

    hasClass = function(element, className) {
        for (var i of element.classList)
            if (element.classList[i] === className)
                return true;
        return false;
    },

    mountTooltip = function(eventTarget, options) {
        var {text} = options;
        var _tooltipTxt = text || eventTarget.getAttribute("data-mnr-tooltip");
        var tooltip = document.createElement("div");
        var tooltipTxt = document.createTextNode(_tooltipTxt);
        tooltip.appendChild(tooltipTxt);
        MNR_BODY.appendChild(tooltip);
        styleTooltip(tooltip, eventTarget, options);
    },

    createTooltip = function(eventTarget, options) {
        eventTarget.addEventListener("mouseenter", function (e) {
            mountTooltip(this, options);
        });
        eventTarget.addEventListener("mouseleave", function (e) {
            dismountTooltip(this);
        });
    },

    dismountTooltip = function() {
        if (document.querySelector(".mnr-tooltip"))
            document.querySelector(".mnr-tooltip").remove();
    },

    styleTooltip = function(tooltip, eventTarget, options) {
        var {placement, animated = false, color = "default"} = options;

        if (color)
            color = "mnr-tooltip-" + color;

        tooltip.classList.add("mnr-tooltip", color);
        if (animated)
            tooltip.classList.add("mnr-tooltip-grow");

        setTooltipPlacement(tooltip, placement, eventTarget);
    },

    setTooltipPlacement = function(tooltip, placement, eventTarget) {
        switch(placement) {
            case "right":
                tooltip.style.top = getElementPosition(eventTarget, "top") + 15 + "px";
                tooltip.style.left = getElementPosition(eventTarget, "right") + 5 + "px";
                break;
            case "left":
                tooltip.style.top = getElementPosition(eventTarget, "top");
                tooltip.style.right = getElementPosition(eventTarget, "left") + 5 + "px";
                break;
            case "top":
                tooltip.style.top = getElementPosition(eventTarget, "top") - 30 + "px";
                break;
            case "bottom":
                tooltip.style.top = getElementPosition(eventTarget, "bottom") + 5 + "px";
                break;
        }
    },

    getElementPosition = function(element, position) {
        var p = element.getBoundingClientRect();
        switch(position) {
            case "right":
                return p.right;
            case "left":
                return p.left;
            case "top":
                return p.top;
            case "bottom":
                return p.bottom;
            default:
                return p;
        }
    }
;

window.addEventListener("load", function(e) {
    if (MNR_ARRAY_TOOLTIPS && MNR_ARRAY_TOOLTIPS.length > 0)
        for(var i = MNR_ARRAY_TOOLTIPS.length; i--;) {
            if (MNR_ARRAY_TOOLTIPS[i].hasAttribute("data-mnr-tooltip") && MNR_ARRAY_TOOLTIPS[i].hasAttribute("data-mnr-tooltip-placement"))
                createTooltip(MNR_ARRAY_TOOLTIPS[i], MNR_ARRAY_TOOLTIPS[i].getAttribute("data-mnr-tooltip-placement"));

            if (MNR_ARRAY_TOOLTIPS[i].hasAttribute("data-mnr-tooltip"))
                dismountTooltip();

        };
});