甜甜的泥土

tooltip

i just want to make a plugin that named tooltip,this a tag blackberry picture

this is the second tags apple

this line is for test when the span near right border well

if the span in the position 1/2,it will stand like this

                    
(function() {
    var wrap = document.getElementsByClassName('demo')[0];
    var target = null;
    var isSameTarget = false;
    var time = null;
    var getStyle = function(elem,attr){
        return elem.currentStyle ? elem.currentStyle[attr] : window.getComputedStyle(elem, false)[attr];
    };
    var wrapWidth = parseInt(getStyle(wrap,'width'),10);
    var left_right = wrapWidth * .5;
    var createTipbox = function(event){
        var f = function(){
            var elem = event.target;
            var flag = elem.classList.contains('tooltip');
            if (!flag) return false; // it means if the target is not span.tooltip then exit;

            if (target === null) {
                target = elem;
            }else{
                isSameTarget = (target === elem);
            }
            
            if(isSameTarget) return false; // 如果是同一个事件对象触发事件,则跳出不执行
            console.log(1);
            var tipbox = document.getElementById('tipbox');
            var t;
            var _position;     
            var _positionValue;      
            var _top;
            var g = {
                left:elem.offsetLeft,
                top:elem.offsetTop,
                width:elem.offsetWidth,
                height:elem.offsetHeight
            };

            _top = g.top + g.height + 10 + 'px';
            _iconPosition = g.width / 2 - 10 + 'px';
            
            if (g.left < left_right) {
                _position = 'left';
                _positionValue = g.left + 'px';
            }else{
                _position = 'right';
                _positionValue = wrapWidth - g.left - g.width + 'px';
            }
            
            //create the tip box
            if (tipbox !== null) {
                tipbox.getElementsByClassName('tipboxText')[0].innerHTML = elem.dataset.tip;
                tipbox.style.cssText =_position+':'+_positionValue+';top:'+_top+';display:block;';
                tipbox.getElementsByClassName('tooltip-icon-bottom')[0].style.cssText = _position+':'+_iconPosition;
            }else{
                var _tipbox = document.createElement('div');
                var _tipboxInner = document.createElement('div');
                var _tipboxText = document.createElement('div');
                var icon = '';
                
                _tipbox.className = 'tipbox';
                _tipbox.id = 'tipbox';  //为了快速找到它,所以定义了id
                _tipbox.style.cssText =_position+':'+_positionValue+';top:'+_top+';';

                _tipboxInner.className = 'tipboxInner';

                _tipboxText.className = 'tipboxText';
                _tipboxText.innerHTML = elem.dataset.tip;

                _tipboxInner.appendChild(_tipboxText);
                _tipboxInner.innerHTML += icon;
                _tipbox.appendChild(_tipboxInner);
                wrap.appendChild(_tipbox);
                tipbox = _tipbox;
            }


            tipbox.addEventListener('mouseenter',function(){
                clearTimeout(t);
            },false);

            tipbox.addEventListener('mouseleave',function(){
                t = setTimeout(function(){
                   tipbox.style.display = 'none';
                   target = null;
                   isSameTarget = false;
                },300);
            },false);

            elem.addEventListener('mouseleave',function(){
                if (tipbox !== null) {
                    t = setTimeout(function(){
                        tipbox.style.display = 'none';
                        target = null;
                        isSameTarget = false;
                    },300);
                }
            },false);
        }
        clearTimeout(time);
        time = setTimeout(f,100);
    };
    wrap.addEventListener('mousemove',createTipbox,false);
})();