JS所谓的享元模式-->

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<style>
    .tooltip {
        300px;
        height:300px;
        background:#f00;
    }
</style>
<script>
    var TooltipManager = (function(){
        var storedInstance = null;
        var Tooltip = function(){
            this.delayTimeout = null;
            this.delay = 1500;

            this.element = document.createElement('div');
            this.element.style.display = 'none';
            this.element.style.position = 'absolute';
            this.element.className = 'tooltip';
            document.getElementsByTagName('body')[0].appendChild(this.element);
        };

        Tooltip.prototype = {
            startDelay : function(e,text){
                if(this.delayTimeout == null){
                    var  that = this;
                    var x = e.clientX;
                    var y = e.clientY;
                    this.delayTimeout = setTimeout(function(){
                        that.show(x,y,text);
                    },this.delay)
                }
            },
            show : function(x,y,text){
                clearTimeout(this.delayTimeout);
                this.delayTimeout = null;
                this.element.innerHTML = text;
                this.element.style.left = x + 'px';
                this.element.style.top = (y+20) + 'px';
                this.element.style.display = 'block';
            },
            hide : function(){
                clearTimeout(this.delayTimeout);
                this.delayTimeout = null;
                this.elements.style.display = 'none';
            }
        };

        return {
            addTooltip : function(targetElement,text){
                var tt = this.getTooltip();
                addEvent(targetElement,'mouseover',function(e){ tt.startDelay(e,text)});
                addEvent(targetElement,'mouseout',function(e){ tt.hide()})
            },
            getTooltip : function(){
                if(storedInstance == null){
                    storedInstance = new Tooltip();
                };
                return storedInstance;
            }
        }
    }())
</script>
</body>
</html>

直接上代码了

原文地址:https://www.cnblogs.com/diligenceday/p/3428020.html