ztooltip
Version:
A simple tooltip made by pure javascript,working on most browsers includes IE6.
1 lines • 5 kB
JavaScript
!function(){function e(e){v.bind(e,"mouseover",n,"hoverShow"),v.bind(e,"mouseout",o,"hoverHide")}function t(e){var e=e||window.event,e=e.target||e.srcElement;i(e)}function n(e){var e=e||window.event,e=e.target||e.srcElement;i(e)}function o(){document.getElementById("ZTooltip").style.display="none"}function i(e){var t,n=document.getElementById("ZTooltip"),o=e.getAttribute("data-content");if(o||(o=""),n)"none"==n.style.display?(e!==n.targetEle&&l(n,o),n.style.display="block",t=s(e,n),a(n,t.boxTop,t.boxLeft)):e!==n.targetEle?(l(n,o),t=s(e,n),a(n,t.boxTop,t.boxLeft)):n.style.display="none";else{var i=r();document.body.appendChild(i),l(i,o),t=s(e,i),a(i,t.boxTop,t.boxLeft)}}function r(){for(var e=[],t=0;4>t;t++)e[t]=d("div");return e[0].id="ZTooltip",e[0].style.display="block",e[0].className="m-tipbox",e[1].className="container",e[2].className="u-arrow u-arrowB",e[3].className="u-arrow u-arrowT",e[0].appendChild(e[1]),e[0].appendChild(e[2]),e[0].appendChild(e[3]),e[0]}function l(e,t){for(var n=e.getElementsByTagName("div"),o=0,i=n.length;i>o;o++)if(v.hasClass(n[o],"container"))return void(n[o].innerHTML=t)}function a(e,t,n){e.style.position="absolute",e.style.top=t+"px",e.style.left=n+"px"}function s(e,t){var n={tL:p(e),tT:b(e),eleSize:c(e)},o=u(self,n),i=v.options;"auto"!=i.width&&(t.style.width=i.width+"px"),"auto"!=i.height&&(t.style.height=i.height+"px");var r=c(t),l={needWidth:r.width-(n.eleSize.width-parseInt(i.boxOffsetX)),needHeight:r.height+parseInt(i.boxOffsetY)+i.arrowSize},a=f(t,o,l),s=n.tL+i.boxOffsetX,d=n.tL-l.needWidth,m=n.tT-i.boxOffsetY-r.height-i.arrowSize,h=n.tT+i.boxOffsetY+n.eleSize.height+i.arrowSize,g=0,w=0;switch(t.targetEle=e,parseInt(a)){case 0:g=s,w=m,t.className="m-tipboxT m-tipboxR";break;case 1:g=d,w=m,t.className="m-tipboxT m-tipboxL";break;case 2:g=s,w=h,t.className="m-tipboxB m-tipboxR";break;case 3:g=d,w=h,t.className="m-tipboxB m-tipboxL"}var x={boxTop:w,boxLeft:g};return x}function d(e){return document.createElement(e)}function c(e){return{width:e.offsetWidth,height:e.offsetHeight}}function f(e,t,n){for(var o=[{realW:t.right,realH:t.top},{realW:t.left,realH:t.top},{realW:t.right,realH:t.bottom},{realW:t.left,realH:t.bottom}],i=0;4>i;i++)if(n.needWidth<=o[i].realW&&n.needHeight<=o[i].realH)return i;return 0}function u(e,t){var n=h(e),o=t.tT-n.scrollTop,i=t.tL-n.scrollLeft,r=m();return{top:o,left:i,right:r.viewWidth-t.eleSize.width-i,bottom:r.viewHeight-t.eleSize.height-o}}function m(){var e=window.innerWidth?window.innerWidth:document.documentElement&&document.documentElement.clientWidth?document.documentElement.clientWidth:document.body.offsetWidth,t=window.innerHeight?window.innerHeight:document.documentElement&&document.documentElement.clientHeight?document.documentElement.clientHeight:document.body.offsetHeight;return{viewWidth:e,viewHeight:t}}function h(){return"BackCompat"==document.compatMode?{scrollTop:document.body.scrollTop,scrollLeft:document.body.scrollLeft}:{scrollTop:document.body.scrollTop+document.documentElement.scrollTop,scrollLeft:document.body.scrollLeft+document.documentElement.scrollLeft}}function p(e){for(var t=e.offsetLeft,n=e.offsetParent;null!=n;)t+=n.offsetLeft,n=n.offsetParent;return t}function b(e){for(var t=e.offsetTop,n=e.offsetParent;null!=n;)t+=n.offsetTop,n=n.offsetParent;return t}var g={width:200,height:"auto",boxOffsetX:20,boxOffsetY:5,arrowSize:10,trigger:"hover"},v={options:{},extend:function(e,t){var n,o={};if(!t)return e;for(n in e)o[n]=t[n]?t[n]:e[n];return o},bind:function(){return window.addEventListener?function(e,t,n,o){e.bindFn=e.bindFn||{},e.bindFn[o]={eventType:t,eventFn:n},e.addEventListener(t,n,!1)}:window.attachEvent?function(e,t,n,o){e.bindFn=e.bindFn||{},e.bindFn[o]={eventType:t,eventFn:n},e.attachEvent("on"+t,n,!1)}:void 0}(),hasClass:function(e,t){var n=new RegExp("(\\s|^)"+t+"(\\s|$)");return e.className.match(n)},addClass:function(e,t){for(var n=t.split(" "),o=0,i=n.length;i>o;o++)v.hasClass(e,n[o])||(e.className+=" "+n[o])},removeClass:function(e,t){if(e.classList)e.classList.remove(t);else{var n=new RegExp("(\\s|^)"+t+"(\\s|$)");e.className.replace(n,"")}},getEleByAttr:function(e,t){var n=new Array,o=new Array;n=document.all?document.all:document.getElementsByTagName("*");for(var i=0;i<n.length;i++)if("class"==e){var r=new RegExp("(^| )"+t+"( |$)");r.test(n[i].className)&&(o[o.length]=n[i])}else"for"==e?(n[i].getAttribute("htmlFor")||n[i].getAttribute("for"))&&n[i].htmlFor==t&&(o[o.length]=n[i]):n[i].getAttribute(e)==t&&(o[o.length]=n[i]);return o}},w=function(e){return this instanceof w?(v.options=v.extend(g,e),void this.init()):new w(e)};w.fn=w.prototype,w.fn.init=function(){for(var n=v.getEleByAttr("data-tooltip","show"),o=0,i=n.length;i>o;o++){var r=n[o].getAttribute("data-trigger");r?"click"==r?v.bind(n[o],"click",t,"clickshow"):"hover"==r&&e(n[o]):"click"==v.options.trigger?v.bind(n[o],"click",t,"clickshow"):e(n[o])}},"undefined"!=typeof module&&"undefined"!=typeof module.exports?module.exports=w:window.ZTooltip=w}();