tippy.js
Version:
Vanilla JS Tooltip Library
2 lines (1 loc) • 18.7 kB
JavaScript
(function(a,b){'object'==typeof exports&&'undefined'!=typeof module?module.exports=b(require('popper.js')):'function'==typeof define&&define.amd?define(['popper.js'],b):a.tippy=b(a.Popper)})(this,function(a){'use strict';function b(a){return'[object Object]'==={}.toString.call(a)}function c(a){return[].slice.call(a)}function d(a){if(a instanceof Element||b(a))return[a];if(a instanceof NodeList)return c(a);if(Array.isArray(a))return a;try{return c(document.querySelectorAll(a))}catch(a){return[]}}function f(a){a.refObj=!0,a.attributes=a.attributes||{},a.setAttribute=function(b,c){a.attributes[b]=c},a.getAttribute=function(b){return a.attributes[b]},a.removeAttribute=function(b){delete a.attributes[b]},a.hasAttribute=function(b){return b in a.attributes},a.addEventListener=function(){},a.removeEventListener=function(){},a.classList={classNames:{},add:function(b){return a.classList.classNames[b]=!0},remove:function(b){return delete a.classList.classNames[b],!0},contains:function(b){return b in a.classList.classNames}}}function g(a){for(var b=['','webkit'],c=a.charAt(0).toUpperCase()+a.slice(1),d=0;d<b.length;d++){var e=b[d],f=e?e+c:a;if('undefined'!=typeof document.body.style[f])return f}return null}function h(){return document.createElement('div')}function i(a,b,c){var d=h();d.setAttribute('class','tippy-popper'),d.setAttribute('role','tooltip'),d.setAttribute('id','tippy-'+a),d.style.zIndex=c.zIndex,d.style.maxWidth=c.maxWidth;var e=h();e.setAttribute('class','tippy-tooltip'),e.setAttribute('data-size',c.size),e.setAttribute('data-animation',c.animation),e.setAttribute('data-state','hidden'),c.theme.split(' ').forEach(function(a){e.classList.add(a+'-theme')});var f=h();if(f.setAttribute('class','tippy-content'),c.arrow){var i=h();i.style[g('transform')]=c.arrowTransform,'round'===c.arrowType?(i.classList.add('tippy-roundarrow'),i.innerHTML='<svg viewBox="0 0 24 8" xmlns="http://www.w3.org/2000/svg"><path d="M3 8s2.021-.015 5.253-4.218C9.584 2.051 10.797 1.007 12 1c1.203-.007 2.416 1.035 3.761 2.782C19.012 8.005 21 8 21 8H3z"/></svg>'):i.classList.add('tippy-arrow'),e.appendChild(i)}if(c.animateFill){e.setAttribute('data-animatefill','');var j=h();j.classList.add('tippy-backdrop'),j.setAttribute('data-state','hidden'),e.appendChild(j)}c.inertia&&e.setAttribute('data-inertia',''),c.interactive&&e.setAttribute('data-interactive','');var k=c.html;if(k){var l;k instanceof Element?(f.appendChild(k),l='#'+(k.id||'tippy-html-template')):(f.innerHTML=document.querySelector(k).innerHTML,l=k),d.setAttribute('data-html',''),e.setAttribute('data-template-id',l),c.interactive&&d.setAttribute('tabindex','-1')}else f[c.allowTitleHTML?'innerHTML':'textContent']=b;return e.appendChild(f),d.appendChild(e),d}function j(a,b,c,d){var e=c.onTrigger,f=c.onMouseLeave,g=c.onBlur,h=c.onDelegateShow,i=c.onDelegateHide,j=[];if('manual'===a)return j;var k=function(a,c){b.addEventListener(a,c),j.push({event:a,handler:c})};return d.target?(U.supportsTouch&&d.touchHold&&(k('touchstart',h),k('touchend',i)),'mouseenter'===a&&(k('mouseover',h),k('mouseout',i)),'focus'===a&&(k('focusin',h),k('focusout',i)),'click'===a&&k('click',h)):(k(a,e),U.supportsTouch&&d.touchHold&&(k('touchstart',e),k('touchend',f)),'mouseenter'===a&&k('mouseleave',f),'focus'===a&&k(T?'focusout':'blur',g)),j}function k(a,b){var c=X.reduce(function(c,d){var e=a.getAttribute('data-tippy-'+d.toLowerCase())||b[d];return'false'===e&&(e=!1),'true'===e&&(e=!0),isFinite(e)&&!isNaN(parseFloat(e))&&(e=parseFloat(e)),'target'!==d&&'string'==typeof e&&'['===e.trim().charAt(0)&&(e=JSON.parse(e)),c[d]=e,c},{});return $({},b,c)}function l(a,b){return b.arrow&&(b.animateFill=!1),b.appendTo&&'function'==typeof b.appendTo&&(b.appendTo=b.appendTo()),'function'==typeof b.html&&(b.html=b.html(a)),b}function m(a){var b=function(b){return a.querySelector(b)};return{tooltip:b(V.TOOLTIP),backdrop:b(V.BACKDROP),content:b(V.CONTENT),arrow:b(V.ARROW)||b(V.ROUND_ARROW)}}function n(a){var b=a.getAttribute('title');b&&a.setAttribute('data-original-title',b),a.removeAttribute('title')}function o(a){void a.offsetHeight}function p(a,b,c){var d=a.popper,e=a.options,f=e.onCreate,g=e.onUpdate;e.onCreate=e.onUpdate=function(){o(d),b&&b(),g(),e.onCreate=f,e.onUpdate=g},c||a.scheduleUpdate()}function q(a){return a.getAttribute('x-placement').replace(/-.+/,'')}function r(a,b,c){if(!b.getAttribute('x-placement'))return!0;var d=a.clientX,e=a.clientY,f=c.interactiveBorder,g=c.distance,h=b.getBoundingClientRect(),i=q(b),j=f+g,k={top:h.top-e>f,bottom:e-h.bottom>f,left:h.left-d>f,right:d-h.right>f};return'top'===i?k.top=h.top-e>j:'bottom'===i?k.bottom=e-h.bottom>j:'left'===i?k.left=h.left-d>j:'right'===i?k.right=d-h.right>j:void 0,k.top||k.bottom||k.left||k.right}function s(a,b,c,d){if(!b.length)return'';var e={scale:function(){return 1===b.length?''+b[0]:c?b[0]+', '+b[1]:b[1]+', '+b[0]}(),translate:function(){return 1===b.length?d?-b[0]+'px':b[0]+'px':c?d?b[0]+'px, '+-b[1]+'px':b[0]+'px, '+b[1]+'px':d?-b[1]+'px, '+b[0]+'px':b[1]+'px, '+b[0]+'px'}()};return e[a]}function t(a,b){if(!a)return'';return b?a:{X:'Y',Y:'X'}[a]}function u(a,b,c){var d=q(a),e='top'===d||'bottom'===d,f='right'===d||'bottom'===d,h=function(a){var b=c.match(a);return b?b[1]:''},i=function(a){var b=c.match(a);return b?b[1].split(',').map(parseFloat):[]},j={translate:/translateX?Y?\(([^)]+)\)/,scale:/scaleX?Y?\(([^)]+)\)/},k={translate:{axis:h(/translate([XY])/),numbers:i(j.translate)},scale:{axis:h(/scale([XY])/),numbers:i(j.scale)}},l=c.replace(j.translate,'translate'+t(k.translate.axis,e)+'('+s('translate',k.translate.numbers,e,f)+')').replace(j.scale,'scale'+t(k.scale.axis,e)+'('+s('scale',k.scale.numbers,e,f)+')');b.style[g('transform')]=l}function v(a){return-(a-W.distance)+'px'}function w(a){requestAnimationFrame(function(){setTimeout(a,1)})}function x(a,b){var c=Element.prototype.closest||function(a){for(var b=this;b;){if(e.call(b,a))return b;b=b.parentElement}};return c.call(a,b)}function y(a,b){return Array.isArray(a)?a[b]:a}function z(a,b){a.forEach(function(a){a&&a.setAttribute('data-state',b)})}function A(a,b){a.filter(Boolean).forEach(function(a){a.style[g('transitionDuration')]=b+'ms'})}function B(a){var b=window.scrollX||window.pageXOffset,c=window.scrollY||window.pageYOffset;a.focus(),scroll(b,c)}function C(){var a=this._(ba).lastTriggerEvent;return this.options.followCursor&&!U.usingTouch&&a&&'focus'!==a.type}function D(a){var b=x(a.target,this.options.target);if(b&&!b._tippy){var c=b.getAttribute('title')||this.title;c&&(b.setAttribute('title',c),R(b,$({},this.options,{target:null})),E.call(b._tippy,a))}}function E(a){var b=this,c=this.options;if(J.call(this),!this.state.visible){if(c.target)return void D.call(this,a);if(this._(ba).isPreparingToShow=!0,c.wait)return void c.wait.call(this.popper,this.show.bind(this),a);if(C.call(this)){this._(ba).followCursorListener||K.call(this);var d=m(this.popper),e=d.arrow;e&&(e.style.margin='0'),document.addEventListener('mousemove',this._(ba).followCursorListener)}var f=y(c.delay,0);f?this._(ba).showTimeout=setTimeout(function(){b.show()},f):this.show()}}function F(){var a=this;if(J.call(this),!!this.state.visible){this._(ba).isPreparingToShow=!1;var b=y(this.options.delay,1);b?this._(ba).hideTimeout=setTimeout(function(){a.state.visible&&a.hide()},b):this.hide()}}function G(){var a=this;return{onTrigger:function(b){if(a.state.enabled){var c=U.supportsTouch&&U.usingTouch&&-1<['mouseenter','mouseover','focus'].indexOf(b.type);c&&a.options.touchHold||(a._(ba).lastTriggerEvent=b,'click'===b.type&&'persistent'!==a.options.hideOnClick&&a.state.visible?F.call(a):E.call(a,b),c&&U.iOS&&a.reference.click&&a.reference.click())}},onMouseLeave:function(b){if(!(-1<['mouseleave','mouseout'].indexOf(b.type)&&U.supportsTouch&&U.usingTouch&&a.options.touchHold)){if(a.options.interactive){var c=F.bind(a),d=function b(d){var e=x(d.target,V.REFERENCE),f=x(d.target,V.POPPER)===a.popper,g=e===a.reference;f||g||r(d,a.popper,a.options)&&(document.body.removeEventListener('mouseleave',c),document.removeEventListener('mousemove',b),F.call(a,b))};return document.body.addEventListener('mouseleave',c),void document.addEventListener('mousemove',d)}F.call(a)}},onBlur:function(b){if(!(b.target!==a.reference||U.usingTouch)){if(a.options.interactive){if(!b.relatedTarget)return;if(x(b.relatedTarget,V.POPPER))return}F.call(a)}},onDelegateShow:function(b){x(b.target,a.options.target)&&E.call(a,b)},onDelegateHide:function(b){x(b.target,a.options.target)&&F.call(a)}}}function H(){var b=this,c=this.popper,d=this.reference,e=this.options,f=m(c),g=f.tooltip,h=e.popperOptions,i='round'===e.arrowType?V.ROUND_ARROW:V.ARROW,j=g.querySelector(i),k=$({placement:e.placement},h||{},{modifiers:$({},h?h.modifiers:{},{arrow:$({element:i},h&&h.modifiers?h.modifiers.arrow:{}),flip:$({enabled:e.flip,padding:e.distance+5,behavior:e.flipBehavior},h&&h.modifiers?h.modifiers.flip:{}),offset:$({offset:e.offset},h&&h.modifiers?h.modifiers.offset:{})}),onCreate:function(){g.style[q(c)]=v(e.distance),j&&e.arrowTransform&&u(c,j,e.arrowTransform)},onUpdate:function(){var a=g.style;a.top='',a.bottom='',a.left='',a.right='',a[q(c)]=v(e.distance),j&&e.arrowTransform&&u(c,j,e.arrowTransform)}});return M.call(this,{target:c,callback:function(){b.popperInstance.update()},options:{childList:!0,subtree:!0,characterData:!0}}),new a(d,c,k)}function I(a){var b=this.options;if(this.popperInstance?(this.popperInstance.scheduleUpdate(),b.livePlacement&&!C.call(this)&&this.popperInstance.enableEventListeners()):(this.popperInstance=H.call(this),!b.livePlacement&&this.popperInstance.disableEventListeners()),!C.call(this)){var c=m(this.popper),d=c.arrow;d&&(d.style.margin=''),this.popperInstance.reference=this.reference}p(this.popperInstance,a,!0),b.appendTo.contains(this.popper)||b.appendTo.appendChild(this.popper)}function J(){var a=this._(ba),b=a.showTimeout,c=a.hideTimeout;clearTimeout(b),clearTimeout(c)}function K(){var a=this;this._(ba).followCursorListener=function(b){var c=a._(ba).lastMouseMoveEvent=b,d=c.clientX,e=c.clientY;a.popperInstance&&(a.popperInstance.reference={getBoundingClientRect:function(){return{width:0,height:0,top:e,left:d,right:d,bottom:e}},clientWidth:0,clientHeight:0},a.popperInstance.scheduleUpdate())}}function L(){var a=this,b=function(){a.popper.style[g('transitionDuration')]=a.options.updateDuration+'ms'},c=function(){a.popper.style[g('transitionDuration')]=''};(function d(){a.popperInstance&&a.popperInstance.update(),b(),a.state.visible?requestAnimationFrame(d):c()})()}function M(a){var b=a.target,c=a.callback,d=a.options;if(window.MutationObserver){var e=new MutationObserver(c);e.observe(b,d),this._(ba).mutationObservers.push(e)}}function N(a,b){if(!a)return b();var c=m(this.popper),d=c.tooltip,f=function(a,b){b&&d[a+'EventListener']('ontransitionend'in window?'transitionend':'webkitTransitionEnd',b)},e=function a(c){c.target===d&&(f('remove',a),b())};f('remove',this._(ba).transitionendListener),f('add',e),this._(ba).transitionendListener=e}function O(a,b){return a.reduce(function(a,c){var d=ea,e=l(c,b.performance?b:k(c,b)),f=c.getAttribute('title');if(!f&&!e.target&&!e.html&&!e.dynamicTitle)return a;c.setAttribute(e.target?'data-tippy-delegate':'data-tippy',''),n(c);var g=i(d,f,e),h=new da({id:d,reference:c,popper:g,options:e,title:f,popperInstance:null});e.createPopperInstanceOnInit&&(h.popperInstance=H.call(h),h.popperInstance.disableEventListeners());var o=G.call(h);return h.listeners=e.trigger.trim().split(' ').reduce(function(a,b){return a.concat(j(b,c,o,e))},[]),e.dynamicTitle&&M.call(h,{target:c,callback:function(){var a=m(g),b=a.content,d=c.getAttribute('title');d&&(b[e.allowTitleHTML?'innerHTML':'textContent']=h.title=d,n(c))},options:{attributes:!0}}),c._tippy=h,g._tippy=h,g._reference=c,a.push(h),ea++,a},[])}function P(a){var b=c(document.querySelectorAll(V.POPPER));b.forEach(function(b){var c=b._tippy;if(c){var d=c.options;(!0===d.hideOnClick||-1<d.trigger.indexOf('focus'))&&(!a||b!==a.popper)&&c.hide()}})}function Q(){var a=function(){U.usingTouch||(U.usingTouch=!0,U.iOS&&document.body.classList.add('tippy-touch'),U.dynamicInputDetection&&window.performance&&document.addEventListener('mousemove',b),U.onUserInputChange('touch'))},b=function(){var a;return function(){var c=performance.now();20>c-a&&(U.usingTouch=!1,document.removeEventListener('mousemove',b),!U.iOS&&document.body.classList.remove('tippy-touch'),U.onUserInputChange('mouse')),a=c}}();document.addEventListener('click',function(a){if(!(a.target instanceof Element))return P();var b=x(a.target,V.REFERENCE),c=x(a.target,V.POPPER);if(!(c&&c._tippy&&c._tippy.options.interactive)){if(b&&b._tippy){var d=b._tippy.options,e=-1<d.trigger.indexOf('click'),f=d.multiple;if(!f&&U.usingTouch||!f&&e)return P(b._tippy);if(!0!==d.hideOnClick||e)return}P()}}),document.addEventListener('touchstart',a),window.addEventListener('blur',function(){var a=document,b=a.activeElement;b&&b.blur&&e.call(b,V.REFERENCE)&&b.blur()}),window.addEventListener('resize',function(){c(document.querySelectorAll(V.POPPER)).forEach(function(a){var b=a._tippy;b&&!b.options.livePlacement&&b.popperInstance.scheduleUpdate()})}),!U.supportsTouch&&(navigator.maxTouchPoints||navigator.msMaxTouchPoints)&&document.addEventListener('pointerdown',a)}function R(a,c,e){U.supported&&!fa&&(Q(),fa=!0),b(a)&&f(a),c=$({},W,c);var g=d(a),h=g[0];return{selector:a,options:c,tooltips:U.supported?O(e&&h?[h]:g,c):[],destroyAll:function(){this.tooltips.forEach(function(a){return a.destroy()}),this.tooltips=[]}}}a=a&&a.hasOwnProperty('default')?a['default']:a;var S='undefined'!=typeof window,T=S&&/MSIE |Trident\//.test(navigator.userAgent),U={};S&&(U.supported='requestAnimationFrame'in window,U.supportsTouch='ontouchstart'in window,U.usingTouch=!1,U.dynamicInputDetection=!0,U.iOS=/iPhone|iPad|iPod/.test(navigator.platform)&&!window.MSStream,U.onUserInputChange=function(){});var V={POPPER:'.tippy-popper',TOOLTIP:'.tippy-tooltip',CONTENT:'.tippy-content',BACKDROP:'.tippy-backdrop',ARROW:'.tippy-arrow',ROUND_ARROW:'.tippy-roundarrow',REFERENCE:'[data-tippy]'},W={placement:'top',livePlacement:!0,trigger:'mouseenter focus',animation:'shift-away',html:!1,animateFill:!0,arrow:!1,delay:0,duration:[350,300],interactive:!1,interactiveBorder:2,theme:'dark',size:'regular',distance:10,offset:0,hideOnClick:!0,multiple:!1,followCursor:!1,inertia:!1,updateDuration:350,sticky:!1,appendTo:function(){return document.body},zIndex:9999,touchHold:!1,performance:!1,dynamicTitle:!1,flip:!0,flipBehavior:'flip',arrowType:'sharp',arrowTransform:'',maxWidth:'',target:null,allowTitleHTML:!0,popperOptions:{},createPopperInstanceOnInit:!1,onShow:function(){},onShown:function(){},onHide:function(){},onHidden:function(){}},X=U.supported&&Object.keys(W),Y=function(a,b){if(!(a instanceof b))throw new TypeError('Cannot call a class as a function')},Z=function(){function a(a,b){for(var c,d=0;d<b.length;d++)c=b[d],c.enumerable=c.enumerable||!1,c.configurable=!0,'value'in c&&(c.writable=!0),Object.defineProperty(a,c.key,c)}return function(b,c,d){return c&&a(b.prototype,c),d&&a(b,d),b}}(),$=Object.assign||function(a){for(var b,c=1;c<arguments.length;c++)for(var d in b=arguments[c],b)Object.prototype.hasOwnProperty.call(b,d)&&(a[d]=b[d]);return a},_={};if(S){var aa=Element.prototype;_=aa.matches||aa.matchesSelector||aa.webkitMatchesSelector||aa.mozMatchesSelector||aa.msMatchesSelector||function(a){for(var b=(this.document||this.ownerDocument).querySelectorAll(a),c=b.length;0<=--c&&b.item(c)!==this;);return-1<c}}var e=_,ba={},ca=function(a){return function(b){return b===ba&&a}},da=function(){function a(b){for(var c in Y(this,a),b)this[c]=b[c];this.state={destroyed:!1,visible:!1,enabled:!0},this._=ca({mutationObservers:[]})}return Z(a,[{key:'enable',value:function(){this.state.enabled=!0}},{key:'disable',value:function(){this.state.enabled=!1}},{key:'show',value:function(a){var b=this;if(!this.state.destroyed&&this.state.enabled){var c=this.popper,d=this.reference,e=this.options,f=m(c),h=f.tooltip,i=f.backdrop,j=f.content;return e.dynamicTitle&&!d.getAttribute('data-original-title')||d.hasAttribute('disabled')?void 0:d.refObj||document.documentElement.contains(d)?void(e.onShow.call(c,this),a=y(void 0===a?e.duration:a,0),A([c,h,i],0),c.style.visibility='visible',this.state.visible=!0,I.call(this,function(){if(b.state.visible){if(C.call(b)||b.popperInstance.scheduleUpdate(),C.call(b)){b.popperInstance.disableEventListeners();var f=y(e.delay,0),k=b._(ba).lastTriggerEvent;k&&b._(ba).followCursorListener(f&&b._(ba).lastMouseMoveEvent?b._(ba).lastMouseMoveEvent:k)}A([h,i,i?j:null],a),i&&getComputedStyle(i)[g('transform')],e.interactive&&d.classList.add('tippy-active'),e.sticky&&L.call(b),z([h,i],'visible'),N.call(b,a,function(){e.updateDuration||h.classList.add('tippy-notransition'),e.interactive&&B(c),d.setAttribute('aria-describedby','tippy-'+b.id),e.onShown.call(c,b)})}})):void this.destroy()}}},{key:'hide',value:function(a){var b=this;if(!this.state.destroyed&&this.state.enabled){var c=this.popper,d=this.reference,e=this.options,f=m(c),g=f.tooltip,h=f.backdrop,i=f.content;e.onHide.call(c,this),a=y(void 0===a?e.duration:a,1),e.updateDuration||g.classList.remove('tippy-notransition'),e.interactive&&d.classList.remove('tippy-active'),c.style.visibility='hidden',this.state.visible=!1,A([g,h,h?i:null],a),z([g,h],'hidden'),e.interactive&&-1<e.trigger.indexOf('click')&&B(d),this.popperInstance.disableEventListeners(),w(function(){N.call(b,a,function(){b.state.visible||!e.appendTo.contains(c)||(!b._(ba).isPreparingToShow&&(document.removeEventListener('mousemove',b._(ba).followCursorListener),b._(ba).lastMouseMoveEvent=null),d.removeAttribute('aria-describedby'),e.appendTo.removeChild(c),e.onHidden.call(c,b))})})}}},{key:'destroy',value:function(){var a=this,b=!(0<arguments.length&&void 0!==arguments[0])||arguments[0];if(!this.state.destroyed){this.state.visible&&this.hide(0),this.listeners.forEach(function(b){a.reference.removeEventListener(b.event,b.handler)}),this.title&&this.reference.setAttribute('title',this.title),delete this.reference._tippy;['data-original-title','data-tippy','data-tippy-delegate'].forEach(function(b){a.reference.removeAttribute(b)}),this.options.target&&b&&c(this.reference.querySelectorAll(this.options.target)).forEach(function(a){return a._tippy&&a._tippy.destroy()}),this.popperInstance&&this.popperInstance.destroy(),this._(ba).mutationObservers.forEach(function(a){a.disconnect()}),this.state.destroyed=!0}}}]),a}(),ea=1,fa=!1;return R.version='2.5.2',R.browser=U,R.defaults=W,R.one=function(a,b){return R(a,b,!0).tooltips[0]},R.disableAnimations=function(){W.updateDuration=W.duration=0,W.animateFill=!1},R});