Jquey HTML 鼠标移入 移出 提示框

-------------------------------------------------------------------JS------------------------------------------------------

(function(window) {
    function tooltip(ele, transitionObj, enterCallback, outCallback) {
        if (!ele || typeof ele !== "string") {
            console.error(new Error('The "tooltip" method requires the "class" of at least one parameter'));
            return
        }
        if (transitionObj && ({})
            .constructor.name === "Object") {
            var transition = transitionObj.transition || false,
                time = transitionObj.time || 200,
                timer = null
        }
        var els = document.querySelectorAll(ele),
            tipContent = document.createElement("img");
        Array.prototype.slice.call(els)
            .forEach(function(el) {
                el.addEventListener("mouseenter", function() {
                    var currenLeft = el.offsetLeft,
                        currenTop = el.offsetTop,
                        currenWidth = el.offsetWidth,
                        currenHeight = el.offsetHeight,
                        context = el.getAttribute("data-tip"),
                        direction = el.getAttribute("data-direction") || "top";
                    tipContentSetter(tipContent, context, direction);
                    var tipContentWidth = tipContent.offsetWidth,
                        tipContentHeight = tipContent.offsetHeight;
                    switch (direction) {
                        case "top":
                            tipContent.style.left = currenLeft + currenWidth / 2 - tipContentWidth / 2 + "px";
                            tipContent.style.top = currenTop - tipContentHeight - 7 + "px";
                            break;
                        case "left":
                            tipContent.style.left = currenLeft - tipContentWidth - 7 + "px";
                            tipContent.style.top = currenTop + currenHeight / 2 - tipContentHeight / 2 + "px";
                            break;
                        case "right":
                            tipContent.style.left = currenLeft + currenWidth + 7 + "px";
                            tipContent.style.top = currenTop + currenHeight / 2 - tipContentHeight / 2 + "px";
                            break;
                        case "bottom":
                            tipContent.style.left = currenLeft + currenWidth / 2 - tipContentWidth / 2 + "px";
                            tipContent.style.top = currenTop + currenHeight + 7 + "px"
                    }
                }, false);
                deleteTipContent(el)
            });

        function deleteTipContent(el) {
            el.addEventListener("mouseleave", function() {
                var oldTipContent = document.querySelector(".tool_tip");
                if (oldTipContent) {
                    if (transition === true) {
                        return opacityTransition(oldTipContent, "leave")
                    }
                    document.body.removeChild(oldTipContent);
                    typeof outCallback === "function" ? outCallback() : null
                }
            }, false)
        }

        function tipContentSetter(tipContent, context, direction) {
            tipContent.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAX9JREFUOBGtlb1Kw1AUx//ntlYQRFyKdLUKDqIQwXdwikJdnHSR6igVR2ezOVR8BQfNe6gvoNSxa3EWezzn5sOYmhtreyCkOR+/nN7zEcIvwrfeDD7ffYB8MG/JvRG5cR9ETwCHqCyEdPz8kQ+nvIJvVncFEsi1nLf9eCbqCbxD7ZeHrN4kD8yXhrsrVxgO70thGqQvFF+N0diEk2ZoYcydxDDWnSigk9dzjbHk+G8Ww5Y8YPus+B2SiGUo0BZAz8wl9XVg88jloUcQKIu422yBcef2/qOVsF+1rSHEQlmUYjd3xCzH/Xhd6BYZyDeSqvSZQwY9oDYPbBw6nGKTsKQoSdM6/AdvDmPWRI20f7Lqkd88FJXjWDIBApRxmppw30SzOSWizLlmGJbiqrNARa5S4dDo1pAspZQFMlcH1loCrAHeaYGTqJWhG0g97NjoUphEjNnTzWOrbFeQDPi/eboc4jX23TbtgwtJe3yoxmhsLOn6ShSTLtgRoIIn+QR8AfjkjjH4L6zMAAAAAElFTkSuQmCC";
            tipContent.className = "tool_tip tool_tip_" + direction;
            document.body.appendChild(tipContent);
            if (transition === true) {
                opacityTransition(tipContent, "enter");
                return
            }
            typeof enterCallback === "function" ? enterCallback() : null
        }

        function opacityTransition(ele, state) {
            timer && clearTimeout(timer);
            ele.style.setProperty("transition", "opacity " + time / 1000 + "s");
            ele.style.setProperty("-webkit-transition", "opacity " + time / 1000 + "s");
            if (state === "enter") {
                ele.style.opacity = 0;
                timer = setTimeout(function() {
                    ele.style.opacity = 1;
                    typeof enterCallback === "function" ? enterCallback() : null
                }, 0)
            } else {
                if (state === "leave") {
                    ele.style.opacity = 0;
                    typeof outCallback === "function" ? outCallback() : null;
                    timer = setTimeout(function() {
                        try {
                            document.body.removeChild(ele)
                        } catch (e) {}
                    }, time)
                }
            }
        }
    }
    window.tooltip = tooltip
})(window);

----------------------------------------------------------CSS--------------------------------------------------------

.tool_tip {
	//background-color: rgba(0,0,0,.9);
	padding: 4px 8px;
	border-radius: 4px;
	color: #fff;
	font-size: 12px;
	position: absolute;
	z-index: 99999;
	max-width: 100px;
	word-wrap: break-word
}

.tool_tip:before {
	position: absolute;
	content: '';
	background-color: rgba(0,0,0,0);
	width: 0;
	height: 0;
	border-width: 5px;
	border-style: solid
}

.tool_tip_top:before {
	top: 100%;
	left: 50%;
	transform: translate(-50%,0);
	-ms-transform: translate(-50%,0);
	-webkit-transform: translate(-50%,0);
	border-color: rgba(0,0,0,.9) transparent transparent transparent
}

.tool_tip_right:before {
	top: 50%;
	left: 0;
	transform: translate(-100%,-50%);
	-ms-transform: translate(-100%,-50%);
	-webkit-transform: translate(-100%,-50%);
	border-color: transparent rgba(0,0,0,.9) transparent transparent
}

.tool_tip_bottom:before {
	top: 0;
	left: 50%;
	transform: translate(-50%,-100%);
	-ms-transform: translate(-50%,-100%);
	-webkit-transform: translate(-50%,-100%);
	border-color: transparent transparent rgba(0,0,0,.9) transparent
}

.tool_tip_left:before {
	top: 50%;
	left: 100%;
	transform: translate(0,-50%);
	-ms-transform: translate(0,-50%);
	-webkit-transform: translate(0,-50%);
	border-color: transparent transparent transparent rgba(0,0,0,.9)
}

---------------------------------------------------HTML-----------------------------------------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9"/>
    <title>JS原生tooltip提示框插件</title>
    <link rel="stylesheet" href="style.css">
    <style>
        .box {
            margin-top: 50px;
        }
        .item {
            padding: 5px 10px;
            border: 1px solid #28a7e1;
            border-radius: 4px;
            background-color: #f9f9f9;
            float: left;
            margin-right: 20px;
            list-style: none;
        }
    </style>
</head>
<body>
    <ul class="box">
        <!-- tip：tooltip提示框中的文本内容；direction：tooltip提示框的位置，可选值为top/right/bottom/left -->
        <li class="item" data-tip="Tooltip-top" data-direction="top">top</li>
        <li class="item" data-tip="Tooltip-right" data-direction="right">right</li>
        <li class="item" data-tip="Tooltip-bottom" data-direction="bottom">bottom</li>
        <li class="item" data-tip="Tooltip-left" data-direction="left">left</li>
    </ul>
</body>
<script src="tooltip.js"></script>
<script>
    /*
     * 参数：
     * 1. '.item'：需要添加tooltip提示的目标元素，必填项；若只给一个元素添加tooltip，可以使用id
     * 2. {transition: true[, time: 1000]}: 过度效果，transition：是否添加过度效果，time：过度效果的持续时间（单位为毫秒，默认为200毫秒）
     * 3. enterCallback：tooltip显示时的回调函数
     * 4. outCallback：tooltip消失时的回调函数
     */
    // tooltip('.item');
    // tooltip('.item', null, enterCallback, outCallback);
    // tooltip('.item', {transition: true}, enterCallback, outCallback);
    tooltip('.item', {transition: true, time: 200}, enterCallback, outCallback);

    function enterCallback() {
        console.log('enterCallback');
    }
    function outCallback() {
        console.log('outerCallback');
    }
</script>
</html>