tippy.js
Version:
Pure JS Tooltip Library
2 lines (1 loc) • 12.7 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("popper.js")):"function"==typeof define&&define.amd?define(["popper.js"],t):e.Tippy=t(e.Popper)}(this,function(e){"use strict";function t(){T.touchUser=!0,/(iPad|iPhone|iPod)/g.test(navigator.userAgent)&&!window.MSStream&&document.body.classList.add("tippy-touch"),document.removeEventListener("touchstart",t)}function i(e){var t=o(e.target,x.el),i=o(e.target,x.popper);if(i){if(O.refs[O.poppers.indexOf(i)].settings.interactive)return}if(t){var n=O.refs[O.els.indexOf(t)];if(!0!==n.settings.hideOnClick||T.touchUser||clearTimeout(n.popper.getAttribute("data-delay")),!n.settings.multiple&&T.touchUser||!n.settings.multiple&&-1!==n.settings.trigger.indexOf("click"))return w(n);if(!0!==n.settings.hideOnClick||-1!==n.settings.trigger.indexOf("click"))return}!o(e.target,x.controller)&&document.body.querySelector(x.popper)&&w()}function n(e){for(var t=[!1,"webkit"],i=e.charAt(0).toUpperCase()+e.slice(1),n=0;n<t.length;n++){var r=t[n],o=r?""+r+i:e;if(void 0!==window.document.body.style[o])return o}return null}function r(e){return e.replace(/-.+/,"")}function o(e,t){return Element.prototype.matches||(Element.prototype.matches=Element.prototype.matchesSelector||Element.prototype.webkitMatchesSelector||Element.prototype.mozMatchesSelector||Element.prototype.msMatchesSelector||function(e){for(var t=(this.document||this.ownerDocument).querySelectorAll(e),i=t.length;--i>=0&&t.item(i)!==this;);return i>-1}),Element.prototype.closest||(Element.prototype.closest=function(e){for(var t=this;t;){if(t.matches(e))return t;t=t.parentElement}}),e.closest(t)}function s(t){var i=t.settings,n=t.popper.querySelector(x.tooltip),o=L({placement:i.position},i.popperOptions||{},{modifiers:L({},i.popperOptions?i.popperOptions.modifiers:{},{flip:L({padding:parseInt(i.distance)+5},i.popperOptions&&i.popperOptions.modifiers?i.popperOptions.modifiers.flip:{}),offset:L({offset:parseInt(i.offset)},i.popperOptions&&i.popperOptions.modifiers?i.popperOptions.modifiers.offset:{})}),onUpdate:function(){n.style.top="",n.style.bottom="",n.style.left="",n.style.right="",n.style[r(t.popper.getAttribute("x-placement"))]=-(i.distance-10)+"px"}});return new e(t.el,t.popper,o)}function a(e,t,i){var n=document.createElement("div");n.setAttribute("class","tippy-popper"),n.setAttribute("role","tooltip"),n.setAttribute("aria-hidden","true"),n.setAttribute("id","tippy-tooltip-"+e);var o=document.createElement("div");if(o.setAttribute("class","tippy-tooltip tippy-tooltip--"+i.size+" "+i.theme+"-theme leave"),o.setAttribute("data-animation",i.animation),i.arrow){var s=document.createElement("div");s.setAttribute("class","arrow-"+i.arrowSize),s.setAttribute("x-arrow",""),o.appendChild(s)}if(i.animateFill){o.setAttribute("data-animatefill","");var a=document.createElement("div");a.setAttribute("class","leave"),a.setAttribute("x-circle",""),o.appendChild(a)}i.inertia&&o.setAttribute("data-inertia","");var p=document.createElement("div");if(p.setAttribute("class","tippy-tooltip-content"),i.html){var l=void 0;i.html instanceof Element?(p.innerHTML=i.html.innerHTML,l=i.html.id||"tippy-html-template"):(p.innerHTML=document.getElementById(i.html.replace("#","")).innerHTML,l=i.html),n.classList.add("html-template"),n.setAttribute("tabindex","0"),o.setAttribute("data-template-id",l)}else p.innerHTML=t;return o.style[r(i.position)]=-(i.distance-10)+"px",o.appendChild(p),n.appendChild(o),n}function p(e,t,i){var n=[];return"manual"===e?n:(t.addEventListener(e,i.handleTrigger),n.push({event:e,handler:i.handleTrigger}),"mouseenter"===e&&(t.addEventListener("mouseleave",i.handleMouseleave),n.push({event:"mouseleave",handler:i.handleMouseleave})),"focus"===e&&(t.addEventListener("blur",i.handleBlur),n.push({event:"blur",handler:i.handleBlur})),n)}function l(e){O.refs.push(e),O.els.push(e.el),O.poppers.push(e.popper)}function c(e){var t=e.getAttribute("title");e.setAttribute("data-original-title",t||"html"),e.removeAttribute("title")}function d(e){var t=e.getBoundingClientRect();return t.top>=0&&t.left>=0&&t.bottom<=(window.innerHeight||document.documentElement.clientHeight)&&t.right<=(window.innerWidth||document.documentElement.clientWidth)}function u(e){var t=O.refs[O.els.indexOf(this)],i=r(t.popper.getAttribute("x-placement")),o=Math.round(t.popper.offsetWidth/2),s=Math.round(t.popper.offsetHeight/2),a=e.pageX-o,p=e.pageY-2.5*s;"left"===i?(a=e.pageX-2*o-15,p=e.pageY-s):"right"===i?(a=e.pageX+s,p=e.pageY-s):"bottom"===i&&(p=e.pageY+s/1.5),t.popper.style[n("transform")]="translate3d("+a+"px, "+p+"px, 0)"}function f(e,t){t?window.getComputedStyle(t)[n("transform")]:window.getComputedStyle(e).opacity}function h(e,t){e.forEach(function(e){e&&t(e.classList)})}function m(e,t){e.forEach(function(e){e&&(e.hasAttribute("x-circle")&&(t/=1.25),e.style[n("transitionDuration")]=t+"ms")})}function v(e,t){setTimeout(function(){var i=e.settings.position!==e.popper.getAttribute("x-placement");!e.flipped&&i?(e.flipped=!0,t()):e.flipped&&!i&&(e.flipped=!1,t())},0)}function g(e,t,i){var n=e.popper.querySelector(x.tooltip),r=!1,o=function e(t){t.target===n&&(r=!0,n.removeEventListener("webkitTransitionEnd",e),n.removeEventListener("transitionend",e),i())};n.addEventListener("webkitTransitionEnd",o),n.addEventListener("transitionend",o),clearTimeout(e.transitionendTimeout),e.transitionendTimeout=setTimeout(function(){r||i()},t)}function y(e,t){var i=e.style.visibility;return"show"===t?"visible"===i:"hidden"===i}function b(e){if(document.body.appendChild(e.popper),e.popperInstance){e.popperInstance.update();var t=0;!function i(){setTimeout(function(){e.popperInstance.scheduleUpdate(),t<50&&window.innerWidth<=e.popper.getBoundingClientRect().right&&i()},0),t++}(),e.settings.followCursor||e.popperInstance.enableEventListeners()}else e.popperInstance=s(e),e.settings.followCursor&&!T.touchUser&&(e.el.addEventListener("mousemove",u),e.popperInstance.disableEventListeners())}function w(e){O.refs.forEach(function(t){if(document.body.contains(t.popper)){var i=!0===t.settings.hideOnClick,n=!e||t.popper!==e.popper;i&&n&&t.tippyInstance.hide(t.popper,t.settings.hideDuration)}})}e="default"in e?e.default:e;var E=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},A=function(){function e(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,i,n){return i&&e(t.prototype,i),n&&e(t,n),t}}(),L=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n])}return e},T={touchUser:!1,idCounter:0},O={refs:[],els:[],poppers:[]},k={html:!1,position:"top",animation:"shift",animateFill:!0,arrow:!1,arrowSize:"regular",delay:0,hideDelay:0,trigger:"mouseenter focus",duration:375,hideDuration:375,interactive:!1,theme:"dark",size:"regular",distance:10,offset:0,hideOnClick:!0,multiple:!1,followCursor:!1,inertia:!1,transitionFlip:!0,popperOptions:{}},S=Object.keys(k),x={popper:".tippy-popper",tooltip:".tippy-tooltip",content:".tippy-tooltip-content",circle:"[x-circle]",arrow:"[x-arrow]",el:"[data-tooltipped]",controller:"[data-tippy-controller]"};return document.addEventListener&&(document.addEventListener("click",i),document.addEventListener("touchstart",t)),function(){function e(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(E(this,e),"addEventListener"in window&&!/MSIE 9/i.test(navigator.userAgent)&&!window.operamini){this.settings=L(JSON.parse(JSON.stringify(k)),i),this.callbacks={wait:i.wait,beforeShown:i.beforeShown||new Function,shown:i.shown||new Function,beforeHidden:i.beforeHidden||new Function,hidden:i.hidden||new Function};var n=t instanceof Element?[t]:[].slice.call(document.querySelectorAll(t));this._createTooltips(n)}}return A(e,[{key:"_applyIndividualSettings",value:function(e){var t=this,i={};return S.forEach(function(n){var r=e.getAttribute("data-"+n.toLowerCase())||t.settings[n];"false"===r&&(r=!1),i[n]=r}),i.arrow&&(i.animateFill=!1),L({},this.settings,i)}},{key:"_getEventListenerHandlers",value:function(e,t,i){var n=this,r=function(){clearTimeout(t.getAttribute("data-delay")),clearTimeout(t.getAttribute("data-hidedelay"))},s=function(){if(r(),"visible"!==t.style.visibility)if(i.delay){var e=setTimeout(function(){return n.show(t,i.duration)},i.delay);t.setAttribute("data-delay",e)}else n.show(t,i.duration)},a=function(e){return n.callbacks.wait?n.callbacks.wait(s,e):s()},p=function(){if(r(),i.hideDelay){var e=setTimeout(function(){return n.hide(t,i.hideDuration)},i.hideDelay);t.setAttribute("data-hidedelay",e)}else n.hide(t,i.hideDuration)};return{handleTrigger:function(e){var n="click"===e.type,r="visible"===t.style.visibility,o="persistent"!==i.hideOnClick;n&&r&&o?p():a(e)},handleMouseleave:function(n){if(i.interactive){var r=function n(r){var s=o(r.target,x.popper)===t,a=o(r.target,x.el)===e,l=-1!==i.trigger.indexOf("click");if(!(s||a||l)){var c=t.getBoundingClientRect();Math.abs(r.clientY-c.bottom)>=2&&Math.abs(r.clientY-c.top)>=2&&Math.abs(r.clientX-c.left)>=2&&Math.abs(r.clientX-c.right)>=2&&(document.removeEventListener("mousemove",n),p())}};return document.addEventListener("mousemove",r)}p()},handleBlur:function(e){!T.touchUser&&e.relatedTarget&&(o(e.relatedTarget,x.popper)||p())}}}},{key:"_createTooltips",value:function(t){var i=this;t.forEach(function(e){var t=i._applyIndividualSettings(e),n=e.title;if(n||t.html){var r=T.idCounter;e.setAttribute("data-tooltipped",""),e.setAttribute("aria-describedby","tippy-tooltip-"+r),c(e);var o=a(r,n,t),s=i._getEventListenerHandlers(e,o,t),d=[];t.trigger.trim().split(" ").forEach(function(t){return d=d.concat(p(t,e,s))}),l({id:r,el:e,popper:o,settings:t,listeners:d,tippyInstance:i}),T.idCounter++}}),e.store=O}},{key:"getPopperElement",value:function(e){try{return O.refs[O.els.indexOf(e)].popper}catch(e){throw new Error("[Tippy error]: Element does not exist in any Tippy instances")}}},{key:"getTooltippedElement",value:function(e){try{return O.refs[O.poppers.indexOf(e)].el}catch(e){throw new Error("[Tippy error]: Popper does not exist in any Tippy instances")}}},{key:"show",value:function(e){var t=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:this.settings.duration,n=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],r=O.refs[O.poppers.indexOf(e)],o=e.querySelector(x.tooltip),s=e.querySelector(x.circle);n&&(this.callbacks.beforeShown(),v(r,function(){t.hide(e,0,!1),setTimeout(function(){r.hidden||t.show(e,i,!1)},0)})),document.body.contains(e)||b(r),r.settings.interactive&&r.el.classList.add("active"),r.hidden=!1,r.popper.style.visibility="visible",r.popper.setAttribute("aria-hidden","false"),f(o,s),h([o,s],function(e){e.remove("leave"),e.add("enter")}),m([o,s],i),g(r,i,function(){y(e,"show")&&!r.onShownFired&&(r.settings.transitionFlip||o.classList.add("tippy-notransition"),r.settings.interactive&&e.focus(),r.onShownFired=!0,n&&t.callbacks.shown())})}},{key:"hide",value:function(e){var t=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:this.settings.duration,r=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],o=O.refs[O.poppers.indexOf(e)],s=e.querySelector(x.tooltip),a=e.querySelector(x.circle);e.querySelector(x.content);r&&(this.callbacks.beforeHidden(),o.hidden=!0,o.el.classList.remove("active"),o.onShownFired=!1,o.settings.transitionFlip||s.classList.remove("tippy-notransition"),o.flipped=o.settings.position!==e.getAttribute("x-placement")),e.style.visibility="hidden",e.setAttribute("aria-hidden","true"),i===k.hideDuration?i=parseInt(s.style[n("transitionDuration")]):m([s,a],i),h([s,a],function(e){e.remove("enter"),e.add("leave")}),o.settings.html&&-1!==o.settings.trigger.indexOf("click")&&d(o.el)&&o.el.focus(),g(o,i,function(){y(e,"hide")&&document.body.contains(e)&&(o.popperInstance.disableEventListeners(),document.body.removeChild(e),r&&t.callbacks.hidden())})}},{key:"destroy",value:function(e){var t=O.poppers.indexOf(e),i=O.refs[t];i.listeners.forEach(function(e){return i.el.removeEventListener(e.event,e.handler)}),i.el.removeAttribute("data-tooltipped"),i.el.removeAttribute("aria-describedby"),i.popperInstance&&i.popperInstance.destroy(),O.refs.splice(t,1),O.els.splice(t,1),O.poppers.splice(t,1)}},{key:"update",value:function(e){var t=O.refs[O.poppers.indexOf(e)],i=e.querySelector(x.content),n=t.settings.html;n?i.innerHTML=n instanceof Element?n.innerHTML:document.getElementById(n.replace("#","")).innerHTML:(i.innerHTML=t.el.getAttribute("title")||t.el.getAttribute("data-original-title"),c(t.el))}}]),e}()});