UNPKG

tippy.js

Version:

Vanilla JS Tooltip & Popover Library

3 lines (2 loc) 19.4 kB
(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){document.addEventListener('click',ja,a),document.addEventListener('touchstart',ga),window.addEventListener('blur',ka),window.addEventListener('resize',la),!ea&&(navigator.maxTouchPoints||navigator.msMaxTouchPoints)&&document.addEventListener('pointerdown',ga)}function c(b,d){function g(){U(function(){ra=!1})}function j(a){var b=ka=a,c=b.clientX,d=b.clientY;if(xa.popperInstance){var e=xa.reference.getBoundingClientRect(),f=xa.props.followCursor,g='horizontal'===f,h='vertical'===f;xa.popperInstance.reference={getBoundingClientRect:function(){return{width:0,height:0,top:g?e.top:d,bottom:g?e.bottom:d,left:h?e.left:c,right:h?e.right:c}},clientWidth:0,clientHeight:0},xa.popperInstance.scheduleUpdate()}}function k(a){var b=I(a.target,xa.props.target);b&&!b._tippy&&(c(b,e({},xa.props,{target:'',showOnInit:!0})),m(a))}function m(a){if(Q(),!xa.state.isVisible){if(xa.props.target)return k(a);if(oa=!0,xa.props.wait)return xa.props.wait(xa,a);F()&&(wa.arrow&&(wa.arrow.style.margin='0'),document.addEventListener('mousemove',j));var b=v(xa.props.delay,0,f.delay);b?la=setTimeout(function(){ba()},b):ba()}}function q(){if(Q(),!xa.state.isVisible)return r();oa=!1;var a=v(xa.props.delay,1,f.delay);a?na=setTimeout(function(){xa.state.isVisible&&da()},a):da()}function r(){document.removeEventListener('mousemove',j),ka=null}function s(){document.body.removeEventListener('mouseleave',q),document.removeEventListener('mousemove',ta)}function t(a){!xa.state.isEnabled||A(a)||(!xa.state.isVisible&&(ja=a),'click'===a.type&&!1!==xa.props.hideOnClick&&xa.state.isVisible?q():m(a))}function u(a){var b=J(a.target,function(a){return a._tippy}),c=I(a.target,i.POPPER)===xa.popper,d=b===xa.reference;c||d||V(X(xa.popper),xa.popper.getBoundingClientRect(),a,xa.props)&&(s(),q())}function w(a){return A(a)?void 0:xa.props.interactive?(document.body.addEventListener('mouseleave',q),void document.addEventListener('mousemove',ta)):void q()}function x(a){if(a.target===xa.reference){if(xa.props.interactive){if(!a.relatedTarget)return;if(I(a.relatedTarget,i.POPPER))return}q()}}function y(a){I(a.target,xa.props.target)&&m(a)}function z(a){I(a.target,xa.props.target)&&q()}function A(a){var b=-1<a.type.indexOf('touch'),c=ea&&fa&&xa.props.touchHold&&!b,d=fa&&!xa.props.touchHold&&b;return c||d}function B(){var b=xa.popperChildren.tooltip,c=xa.props.popperOptions,d=i['round'===xa.props.arrowType?'ROUND_ARROW':'ARROW'],g=b.querySelector(d),h=e({placement:xa.props.placement},c||{},{modifiers:e({},c?c.modifiers:{},{arrow:e({element:d},c&&c.modifiers?c.modifiers.arrow:{}),flip:e({enabled:xa.props.flip,padding:xa.props.distance+5,behavior:xa.props.flipBehavior},c&&c.modifiers?c.modifiers.flip:{}),offset:e({offset:xa.props.offset},c&&c.modifiers?c.modifiers.offset:{})}),onCreate:function(){b.style[X(xa.popper)]=W(xa.props.distance,f.distance),g&&xa.props.arrowTransform&&R(g,xa.props.arrowTransform)},onUpdate:function(){var a=b.style;a.top='',a.bottom='',a.left='',a.right='',a[X(xa.popper)]=W(xa.props.distance,f.distance),g&&xa.props.arrowTransform&&R(g,xa.props.arrowTransform)}}),j=new MutationObserver(function(){xa.popperInstance.update()});return j.observe(xa.popper,{childList:!0,subtree:!0}),ia&&ia.disconnect(),ia=j,sa||(sa=!0,xa.popper.addEventListener('mouseenter',function(a){xa.props.interactive&&xa.state.isVisible&&'mouseenter'===ja.type&&m(a)}),xa.popper.addEventListener('mouseleave',function(a){xa.props.interactive&&'mouseenter'===ja.type&&0===xa.props.interactiveDebounce&&V(X(xa.popper),xa.popper.getBoundingClientRect(),a,xa.props)&&q()})),new a(xa.reference,xa.popper,h)}function E(a){if(xa.popperInstance?(!F()&&xa.popperInstance.scheduleUpdate(),xa.props.livePlacement&&!F()&&xa.popperInstance.enableEventListeners()):(xa.popperInstance=B(),!xa.props.livePlacement&&xa.popperInstance.disableEventListeners()),xa.popperInstance.reference=xa.reference,F()){xa.popperChildren.arrow&&(xa.popperChildren.arrow.style.margin='');var b=v(xa.props.delay,0,f.delay);ja.type&&j(b&&ka?ka:ja)}T(xa.popperInstance,a),xa.props.appendTo.contains(xa.popper)||(xa.props.appendTo.appendChild(xa.popper),xa.props.onMount(xa),xa.state.isMounted=!0)}function F(){return xa.props.followCursor&&!fa&&'focus'!==ja.type}function G(){o([xa.popper],ca?0:xa.props.updateDuration);(function a(){xa.popperInstance&&xa.popperInstance.scheduleUpdate(),xa.state.isMounted?requestAnimationFrame(a):o([xa.popper],0)})()}function H(a,b){M(a,function(){!xa.state.isVisible&&xa.props.appendTo.contains(xa.popper)&&b()})}function L(a,b){M(a,b)}function M(a,b){if(0===a)return b();var c=xa.popperChildren.tooltip,d=function a(d){d.target===c&&(Z(c,'remove',a),b())};Z(c,'remove',pa),Z(c,'add',d),pa=d}function N(a,b,c){xa.reference.addEventListener(a,b),c.push({eventType:a,handler:b})}function O(){qa=xa.props.trigger.trim().split(' ').reduce(function(a,b){return'manual'===b?a:(xa.props.target?'mouseenter'===b?(N('mouseover',y,a),N('mouseout',z,a)):'focus'===b?(N('focusin',y,a),N('focusout',z,a)):'click'===b?N(b,y,a):void 0:(N(b,t,a),xa.props.touchHold&&(N('touchstart',t,a),N('touchend',w,a)),'mouseenter'===b?N('mouseleave',w,a):'focus'===b?N(ca?'focusout':'blur',x,a):void 0),a)},[])}function P(){qa.forEach(function(a){var b=a.eventType,c=a.handler;xa.reference.removeEventListener(b,c)})}function Q(){clearTimeout(la),clearTimeout(na)}function aa(a){_(a,f);var b=xa.props,c=Y(xa.reference,e({},xa.props,a,{performance:!0}));c.performance=a.performance||b.performance,xa.props=c,('trigger'in a||'touchHold'in a)&&(P(),O()),'interactiveDebounce'in a&&(s(),ta=$(u,a.interactiveDebounce)),D(xa.popper,b,c),xa.popperChildren=p(xa.popper),xa.popperInstance&&h.some(function(b){return b in a})&&(xa.popperInstance.destroy(),xa.popperInstance=B(),!xa.state.isVisible&&xa.popperInstance.disableEventListeners(),xa.props.followCursor&&ka&&j(ka))}function ba(){var a=0<arguments.length&&void 0!==arguments[0]?arguments[0]:v(xa.props.duration,0,f.duration[0]);return xa.state.isDestroyed||!xa.state.isEnabled||fa&&!xa.props.touch?void 0:xa.reference.isVirtual||document.documentElement.contains(xa.reference)?xa.reference.hasAttribute('disabled')?void 0:ra?void(ra=!1):void(!1===xa.props.onShow(xa)||(xa.popper.style.visibility='visible',xa.state.isVisible=!0,o([xa.popper,xa.popperChildren.tooltip,xa.popperChildren.backdrop],0),E(function(){xa.state.isVisible&&(!F()&&xa.popperInstance.update(),o([xa.popperChildren.tooltip,xa.popperChildren.backdrop,xa.popperChildren.content],a),xa.popperChildren.backdrop&&(xa.popperChildren.content.style.transitionDelay=Math.round(a/6)+'ms'),xa.props.interactive&&xa.reference.classList.add('tippy-active'),xa.props.sticky&&G(),S([xa.popperChildren.tooltip,xa.popperChildren.backdrop,xa.popperChildren.content],'visible'),L(a,function(){0===xa.props.updateDuration&&xa.popperChildren.tooltip.classList.add('tippy-notransition'),xa.props.interactive&&-1<['focus','click'].indexOf(ja.type)&&K(xa.popper),xa.reference.setAttribute('aria-describedby',xa.popper.id),xa.props.onShown(xa),xa.state.isShown=!0}))}))):ga()}function da(){var a=0<arguments.length&&void 0!==arguments[0]?arguments[0]:v(xa.props.duration,1,f.duration[1]);xa.state.isDestroyed||!xa.state.isEnabled||!1===xa.props.onHide(xa)||(0===xa.props.updateDuration&&xa.popperChildren.tooltip.classList.remove('tippy-notransition'),xa.props.interactive&&xa.reference.classList.remove('tippy-active'),xa.popper.style.visibility='hidden',xa.state.isVisible=!1,xa.state.isShown=!1,o([xa.popperChildren.tooltip,xa.popperChildren.backdrop,xa.popperChildren.content],a),S([xa.popperChildren.tooltip,xa.popperChildren.backdrop,xa.popperChildren.content],'hidden'),xa.props.interactive&&!ra&&-1<['focus','click'].indexOf(ja.type)&&('focus'===ja.type&&(ra=!0),K(xa.reference)),H(a,function(){oa||r(),xa.reference.removeAttribute('aria-describedby'),xa.popperInstance.disableEventListeners(),xa.props.appendTo.removeChild(xa.popper),xa.state.isMounted=!1,xa.props.onHidden(xa)}))}function ga(a){xa.state.isDestroyed||(xa.state.isVisible&&da(0),P(),xa.reference.removeEventListener('click',g),delete xa.reference._tippy,xa.props.target&&a&&l(xa.reference.querySelectorAll(xa.props.target)).forEach(function(a){return a._tippy&&a._tippy.destroy()}),xa.popperInstance&&xa.popperInstance.destroy(),ia&&ia.disconnect(),xa.state.isDestroyed=!0)}var ha=Y(b,d);if(!ha.multiple&&b._tippy)return null;var ia=null,ja={},ka=null,la=0,na=0,oa=!1,pa=function(){},qa=[],ra=!1,sa=!1,ta=0<ha.interactiveDebounce?$(u,ha.interactiveDebounce):u,ua=ma++,va=C(ua,ha),wa=p(va),xa={id:ua,reference:b,popper:va,popperChildren:wa,popperInstance:null,props:ha,state:{isEnabled:!0,isVisible:!1,isDestroyed:!1,isMounted:!1,isShown:!1},clearDelayTimeouts:Q,set:aa,setContent:function(a){aa({content:a})},show:ba,hide:da,enable:function(){xa.state.isEnabled=!0},disable:function(){xa.state.isEnabled=!1},destroy:ga};return O(),b.addEventListener('click',g),ha.lazy||(xa.popperInstance=B(),xa.popperInstance.disableEventListeners()),ha.showOnInit&&setTimeout(m,20),!ha.a11y||ha.target||n(b)||b.setAttribute('tabindex','0'),b._tippy=xa,va._tippy=xa,xa}function d(a,d,g){_(d,f),na||(b(oa),na=!0);var h=e({},f,d);q(a)&&G(a);var i=t(a),j=i[0],k=(g&&j?[j]:i).reduce(function(a,b){var d=b&&c(b,h);return d&&a.push(d),a},[]);return{targets:a,props:h,instances:k,destroyAll:function(){this.instances.forEach(function(a){a.destroy()}),this.instances=[]}}}a=a&&a.hasOwnProperty('default')?a['default']:a;var e=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},f={a11y:!0,content:'',placement:'top',livePlacement:!0,trigger:'mouseenter focus',hideOnClick:!0,animation:'shift-away',animateFill:!0,arrow:!1,delay:[0,20],duration:[325,275],interactive:!1,interactiveBorder:2,interactiveDebounce:0,theme:'dark',size:'regular',distance:10,offset:0,multiple:!1,followCursor:!1,inertia:!1,updateDuration:200,sticky:!1,appendTo:function(){return document.body},zIndex:9999,touchHold:!1,performance:!1,flip:!0,flipBehavior:'flip',arrowType:'sharp',arrowTransform:'',target:'',allowHTML:!0,showOnInit:!1,popperOptions:{},lazy:!0,touch:!0,wait:null,shouldPopperHideOnBlur:function(){return!0},onShow:function(){},onShown:function(){},onHide:function(){},onHidden:function(){},onMount:function(){}},g=function(a){f=e({},f,a)},h=['placement','popperOptions','flip','flipBehavior','distance','offset'],i={POPPER:'.tippy-popper',TOOLTIP:'.tippy-tooltip',CONTENT:'.tippy-content',BACKDROP:'.tippy-backdrop',ARROW:'.tippy-arrow',ROUND_ARROW:'.tippy-roundarrow'},j={x:!0},k='undefined'!=typeof window,l=function(a){return[].slice.call(a)},m=function(a,b){b.content instanceof Element?(s(a,''),a.appendChild(b.content)):a[b.allowHTML?'innerHTML':'textContent']=b.content},n=function(a){return!(a instanceof Element)||H.call(a,'a[href],area[href],button,details,input,textarea,select,iframe,[tabindex]')&&!a.hasAttribute('disabled')},o=function(a,b){a.filter(Boolean).forEach(function(a){a.style.transitionDuration=b+'ms'})},p=function(a){var b=function(b){return a.querySelector(b)};return{tooltip:b(i.TOOLTIP),backdrop:b(i.BACKDROP),content:b(i.CONTENT),arrow:b(i.ARROW)||b(i.ROUND_ARROW)}},q=function(a){return'[object Object]'==={}.toString.call(a)},r=function(){return document.createElement('div')},s=function(a,b){a[j.x&&'innerHTML']=b instanceof Element?b[j.x&&'innerHTML']:b},t=function(a){if(a instanceof Element||q(a))return[a];if(a instanceof NodeList)return l(a);if(Array.isArray(a))return a;try{return l(document.querySelectorAll(a))}catch(a){return[]}},u=function(a){return!isNaN(a)&&!isNaN(parseFloat(a))},v=function(a,b,c){if(Array.isArray(a)){var d=a[b];return null==d?c:d}return a},w=function(a){var b=r();return'round'===a?(b.className='tippy-roundarrow',s(b,'<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>')):b.className='tippy-arrow',b},x=function(){var a=r();return a.className='tippy-backdrop',a.setAttribute('data-state','hidden'),a},y=function(a,b){a.setAttribute('tabindex','-1'),b.setAttribute('data-interactive','')},z=function(a,b){a.removeAttribute('tabindex'),b.removeAttribute('data-interactive')},A=function(a){a.setAttribute('data-inertia','')},B=function(a){a.removeAttribute('data-inertia')},C=function(a,b){var c=r();c.className='tippy-popper',c.setAttribute('role','tooltip'),c.id='tippy-'+a,c.style.zIndex=b.zIndex;var d=r();d.className='tippy-tooltip',d.setAttribute('data-size',b.size),d.setAttribute('data-animation',b.animation),d.setAttribute('data-state','hidden'),b.theme.split(' ').forEach(function(a){d.classList.add(a+'-theme')});var e=r();return e.className='tippy-content',e.setAttribute('data-state','hidden'),b.interactive&&y(c,d),b.arrow&&d.appendChild(w(b.arrowType)),b.animateFill&&(d.appendChild(x()),d.setAttribute('data-animatefill','')),b.inertia&&d.setAttribute('data-inertia',''),m(e,b),d.appendChild(e),c.appendChild(d),c.addEventListener('focusout',function(a){a.relatedTarget&&c._tippy&&!J(a.relatedTarget,function(a){return a===c})&&a.relatedTarget!==c._tippy.reference&&c._tippy.props.shouldPopperHideOnBlur(a)&&c._tippy.hide()}),c},D=function(a,b,c){var d=p(a),e=d.tooltip,f=d.content,g=d.backdrop,h=d.arrow;a.style.zIndex=c.zIndex,e.setAttribute('data-size',c.size),e.setAttribute('data-animation',c.animation),b.content!==c.content&&m(f,c),!b.animateFill&&c.animateFill?(e.appendChild(x()),e.setAttribute('data-animatefill','')):b.animateFill&&!c.animateFill&&(e.removeChild(g),e.removeAttribute('data-animatefill')),!b.arrow&&c.arrow?e.appendChild(w(c.arrowType)):b.arrow&&!c.arrow&&e.removeChild(h),b.arrow&&c.arrow&&b.arrowType!==c.arrowType&&e.replaceChild(w(c.arrowType),h),!b.interactive&&c.interactive?y(a,e):b.interactive&&!c.interactive&&z(a,e),!b.inertia&&c.inertia?A(e):b.inertia&&!c.inertia&&B(e),b.theme!==c.theme&&(b.theme.split(' ').forEach(function(a){e.classList.remove(a+'-theme')}),c.theme.split(' ').forEach(function(a){e.classList.add(a+'-theme')}))},E=function(a){l(document.querySelectorAll(i.POPPER)).forEach(function(b){var c=b._tippy;c&&!0===c.props.hideOnClick&&(!a||b!==a.popper)&&c.hide()})},F=function(a){return Object.keys(f).reduce(function(b,c){var d=(a.getAttribute('data-tippy-'+c)||'').trim();return d?(b[c]='content'===c?d:'true'===d||'false'!==d&&(u(d)?+d:'['===d[0]||'{'===d[0]?JSON.parse(d):d),b):b},{})},G=function(a){var b={isVirtual:!0,attributes:a.attributes||{},setAttribute:function(b,c){a.attributes[b]=c},getAttribute:function(b){return a.attributes[b]},removeAttribute:function(b){delete a.attributes[b]},hasAttribute:function(b){return b in a.attributes},addEventListener:function(){},removeEventListener:function(){},classList:{classNames:{},add:function(b){a.classList.classNames[b]=!0},remove:function(b){delete a.classList.classNames[b]},contains:function(b){return b in a.classList.classNames}}};for(var c in b)a[c]=b[c];return a},H=function(){if(k){var a=Element.prototype;return a.matches||a.matchesSelector||a.webkitMatchesSelector||a.mozMatchesSelector||a.msMatchesSelector}}(),I=function(a,b){return(Element.prototype.closest||function(a){for(var b=this;b;){if(H.call(b,a))return b;b=b.parentElement}}).call(a,b)},J=function(a,b){for(;a;){if(b(a))return a;a=a.parentElement}},K=function(a){var b=window.scrollX||window.pageXOffset,c=window.scrollY||window.pageYOffset;a.focus(),scroll(b,c)},L=function(a){void a.offsetHeight},M=function(a,b){return(b?a:{X:'Y',Y:'X'}[a])||''},N=function(c,d,e,f){var g=d[0],h=d[1];if(!g&&!h)return'';var i={scale:function(){return h?e?g+', '+h:h+', '+g:''+g}(),translate:function(){return h?e?f?g+'px, '+-h+'px':g+'px, '+h+'px':f?-h+'px, '+g+'px':h+'px, '+g+'px':f?-g+'px':g+'px'}()};return i[c]},O=function(a,b){var c=a.match(new RegExp(b+'([XY])'));return c?c[1]:''},P=function(a,b){var c=a.match(b);return c?c[1].split(',').map(parseFloat):[]},Q={translate:/translateX?Y?\(([^)]+)\)/,scale:/scaleX?Y?\(([^)]+)\)/},R=function(a,b){var c=X(I(a,i.POPPER)),d='top'===c||'bottom'===c,e='right'===c||'bottom'===c,f={translate:{axis:O(b,'translate'),numbers:P(b,Q.translate)},scale:{axis:O(b,'scale'),numbers:P(b,Q.scale)}},g=b.replace(Q.translate,'translate'+M(f.translate.axis,d)+'('+N('translate',f.translate.numbers,d,e)+')').replace(Q.scale,'scale'+M(f.scale.axis,d)+'('+N('scale',f.scale.numbers,d,e)+')');a.style['undefined'==typeof document.body.style.transform?'webkitTransform':'transform']=g},S=function(a,b){a.filter(Boolean).forEach(function(a){a.setAttribute('data-state',b)})},T=function(a,b){var c=a.popper,d=a.options,e=d.onCreate,f=d.onUpdate;d.onCreate=d.onUpdate=function(){L(c),b(),f(),d.onCreate=e,d.onUpdate=f}},U=function(a){setTimeout(a,1)},V=function(a,b,c,d){if(!a)return!0;var e=c.clientX,f=c.clientY,g=d.interactiveBorder,h=d.distance,i=b.top-f>('top'===a?g+h:g),j=f-b.bottom>('bottom'===a?g+h:g),k=b.left-e>('left'===a?g+h:g),l=e-b.right>('right'===a?g+h:g);return i||j||k||l},W=function(a,b){return-(a-b)+'px'},X=function(a){var b=a.getAttribute('x-placement');return b?b.split('-')[0]:''},Y=function(a,b){var c=e({},b,b.performance?{}:F(a));return c.arrow&&(c.animateFill=!1),'function'==typeof c.appendTo&&(c.appendTo=b.appendTo(a)),'function'==typeof c.content&&(c.content=b.content(a)),c},Z=function(a,b,c){a[b+'EventListener']('transitionend',c)},$=function(a,b){var c;return function(){var d=this,e=arguments;clearTimeout(c),c=setTimeout(function(){return a.apply(d,e)},b)}},_=function(a,b){for(var c in a||{})if(!(c in b))throw Error('[tippy]: `'+c+'` is not a valid option')},aa=k?navigator:{},ba=k?window:{},ca=/MSIE |Trident\//.test(aa.userAgent),da=/iPhone|iPad|iPod/.test(aa.platform)&&!ba.MSStream,ea='ontouchstart'in ba,fa=!1,ga=function(){fa||(fa=!0,da&&document.body.classList.add('tippy-iOS'),window.performance&&document.addEventListener('mousemove',ia))},ha=0,ia=function a(){var b=performance.now();20>b-ha&&(fa=!1,document.removeEventListener('mousemove',a),!da&&document.body.classList.remove('tippy-iOS')),ha=b},ja=function(a){var b=a.target;if(!(b instanceof Element))return E();var c=I(b,i.POPPER);if(!(c&&c._tippy&&c._tippy.props.interactive)){var d=J(b,function(a){return a._tippy&&a._tippy.reference===a});if(d){var e=d._tippy,f=-1<e.props.trigger.indexOf('click');if(fa||f)return E(e);if(!0!==e.props.hideOnClick||f)return;e.clearDelayTimeouts()}E()}},ka=function(){var a=document,b=a.activeElement;b&&b.blur&&b._tippy&&b.blur()},la=function(){l(document.querySelectorAll(i.POPPER)).forEach(function(a){var b=a._tippy;b.props.livePlacement||b.popperInstance.scheduleUpdate()})},ma=1,na=!1,oa=!1;d.version='3.1.1',d.defaults=f,d.one=function(a,b){return d(a,b,!0).instances[0]},d.setDefaults=function(a){g(a),d.defaults=f},d.disableAnimations=function(){d.setDefaults({duration:0,updateDuration:0,animateFill:!1})},d.hideAllPoppers=E,d.useCapture=function(){oa=!0};return k&&setTimeout(function(){l(document.querySelectorAll('[data-tippy]')).forEach(function(a){var b=a.getAttribute('data-tippy');b&&d(a,{content:b})})}),d}); //# sourceMappingURL=tippy.standalone.min.js.map