uikit/dist/js/components/tooltip.min.js

UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.

/*! UIkit 3.21.0 | https://www.getuikit.com | (c) 2014 - 2024 YOOtheme | MIT License */(function(t,p){typeof exports=="object"&&typeof module<"u"?module.exports=p(require("uikit-util")):typeof define=="function"&&define.amd?define("uikittooltip",["uikit-util"],p):(t=typeof globalThis<"u"?globalThis:t||self,t.UIkitTooltip=p(t.UIkit.util))})(this,function(t){"use strict";function p(s,i=[]){try{return s?t.startsWith(s,"{")?JSON.parse(s):i.length&&!t.includes(s,":")?{[i[0]]:s}:s.split(";").reduce((o,e)=>{const[n,r]=e.split(/:(.*)/);return n&&!t.isUndefined(r)&&(o[n.trim()]=r.trim()),o},{}):{}}catch{return{}}}t.memoize((s,i)=>{const o=Object.keys(i),e=o.concat(s).map(n=>[t.hyphenate(n),`data-${t.hyphenate(n)}`]).flat();return{attributes:o,filter:e}});let C=1;function S(s,i=null){return(i==null?void 0:i.id)||`${s.$options.id}-${C++}`}var A={props:{container:Boolean},data:{container:!0},computed:{container({container:s}){return s===!0&&this.$container||s&&t.$(s)}}},B={props:{pos:String,offset:null,flip:Boolean,shift:Boolean,inset:Boolean},data:{pos:`bottom-${t.isRtl?"right":"left"}`,offset:!1,flip:!0,shift:!0,inset:!1},connected(){this.pos=this.$props.pos.split("-").concat("center").slice(0,2),[this.dir,this.align]=this.pos,this.axis=t.includes(["top","bottom"],this.dir)?"y":"x"},methods:{positionAt(s,i,o){let e=[this.getPositionOffset(s),this.getShiftOffset(s)];const n=[this.flip&&"flip",this.shift&&"shift"],r={element:[this.inset?this.dir:t.flipPosition(this.dir),this.align],target:[this.dir,this.align]};if(this.axis==="y"){for(const a in r)r[a].reverse();e.reverse(),n.reverse()}const h=D(s),c=t.dimensions(s);t.css(s,{top:-c.height,left:-c.width}),t.positionAt(s,i,{attach:r,offset:e,boundary:o,placement:n,viewportOffset:this.getViewportOffset(s)}),h()},getPositionOffset(s=this.$el){return t.toPx(this.offset===!1?t.css(s,"--uk-position-offset"):this.offset,this.axis==="x"?"width":"height",s)*(t.includes(["left","top"],this.dir)?-1:1)*(this.inset?-1:1)},getShiftOffset(s=this.$el){return this.align==="center"?0:t.toPx(t.css(s,"--uk-position-shift-offset"),this.axis==="y"?"width":"height",s)*(t.includes(["left","top"],this.align)?1:-1)},getViewportOffset(s){return t.toPx(t.css(s,"--uk-position-viewport-offset"))}}};function D(s){const i=t.scrollParent(s),{scrollTop:o}=i;return()=>{o!==i.scrollTop&&(i.scrollTop=o)}}var I={props:{cls:Boolean,animation:"list",duration:Number,velocity:Number,origin:String,transition:String},data:{cls:!1,animation:[!1],duration:200,velocity:.2,origin:!1,transition:"ease",clsEnter:"uk-togglable-enter",clsLeave:"uk-togglable-leave"},computed:{hasAnimation:({animation:s})=>!!s[0],hasTransition:({animation:s})=>["slide","reveal"].some(i=>t.startsWith(s[0],i))},methods:{async toggleElement(s,i,o){try{return await Promise.all(t.toNodes(s).map(e=>{const n=t.isBoolean(i)?i:!this.isToggled(e);if(!t.trigger(e,`before${n?"show":"hide"}`,[this]))return Promise.reject();const r=(t.isFunction(o)?o:o===!1||!this.hasAnimation?N:this.hasTransition?F:L)(e,n,this),h=n?this.clsEnter:this.clsLeave;t.addClass(e,h),t.trigger(e,n?"show":"hide",[this]);const c=()=>{t.removeClass(e,h),t.trigger(e,n?"shown":"hidden",[this])};return r?r.then(c,()=>(t.removeClass(e,h),Promise.reject())):c()})),!0}catch{return!1}},isToggled(s=this.$el){return s=t.toNode(s),t.hasClass(s,this.clsEnter)?!0:t.hasClass(s,this.clsLeave)?!1:this.cls?t.hasClass(s,this.cls.split(" ")[0]):t.isVisible(s)},_toggle(s,i){if(!s)return;i=!!i;let o;this.cls?(o=t.includes(this.cls," ")||i!==t.hasClass(s,this.cls),o&&t.toggleClass(s,this.cls,t.includes(this.cls," ")?void 0:i)):(o=i===s.hidden,o&&(s.hidden=!i)),t.$$("[autofocus]",s).some(e=>t.isVisible(e)?e.focus()||!0:e.blur()),o&&t.trigger(s,"toggled",[i,this])}}};function N(s,i,{_toggle:o}){return t.Animation.cancel(s),t.Transition.cancel(s),o(s,i)}async function F(s,i,{animation:o,duration:e,velocity:n,transition:r,_toggle:h}){var c;const[a="reveal",$="top"]=((c=o[0])==null?void 0:c.split("-"))||[],b=[["left","right"],["top","bottom"]],T=b[t.includes(b[0],$)?0:1],P=T[1]===$,m=["width","height"][b.indexOf(T)],d=`margin-${T[0]}`,v=`margin-${$}`;let l=t.dimensions(s)[m];const H=t.Transition.inProgress(s);await t.Transition.cancel(s),i&&h(s,!0);const V=Object.fromEntries(["padding","border","width","height","minWidth","minHeight","overflowY","overflowX",d,v].map(O=>[O,s.style[O]])),g=t.dimensions(s),y=t.toFloat(t.css(s,d)),k=t.toFloat(t.css(s,v)),f=g[m]+k;!H&&!i&&(l+=k);const[w]=t.wrapInner(s,"<div>");t.css(w,{boxSizing:"border-box",height:g.height,width:g.width,...t.css(s,["overflow","padding","borderTop","borderRight","borderBottom","borderLeft","borderImage",v])}),t.css(s,{padding:0,border:0,minWidth:0,minHeight:0,[v]:0,width:g.width,height:g.height,overflow:"hidden",[m]:l});const x=l/f;e=(n*f+e)*(i?1-x:x);const E={[m]:i?f:0};P&&(t.css(s,d,f-l+y),E[d]=i?y:f+y),!P^a==="reveal"&&(t.css(w,d,-f+l),t.Transition.start(w,{[d]:i?0:-f},e,r));try{await t.Transition.start(s,E,e,r)}finally{t.css(s,V),t.unwrap(w.firstChild),i||h(s,!1)}}function L(s,i,o){const{animation:e,duration:n,_toggle:r}=o;return i?(r(s,!0),t.Animation.in(s,e[0],n,o.origin)):t.Animation.out(s,e[1]||e[0],n,o.origin).then(()=>r(s,!1))}const U={TAB:9,ESC:27,SPACE:32,END:35,HOME:36,LEFT:37,UP:38,RIGHT:39,DOWN:40};var u={mixins:[A,I,B],data:{pos:"top",animation:["uk-animation-scale-up"],duration:100,cls:"uk-active"},connected(){j(this.$el)},disconnected(){this.hide()},methods:{show(){if(this.isToggled(this.tooltip||null))return;const{delay:s=0,title:i}=_(this.$options);if(!i)return;const o=t.attr(this.$el,"title"),e=t.on(this.$el,["blur",t.pointerLeave],r=>!t.isTouch(r)&&this.hide());this.reset=()=>{t.attr(this.$el,{title:o,"aria-describedby":null}),e()};const n=S(this);t.attr(this.$el,{title:null,"aria-describedby":n}),clearTimeout(this.showTimer),this.showTimer=setTimeout(()=>this._show(i,n),s)},async hide(){var s;t.matches(this.$el,"input:focus")||(clearTimeout(this.showTimer),this.isToggled(this.tooltip||null)&&await this.toggleElement(this.tooltip,!1,!1),(s=this.reset)==null||s.call(this),t.remove(this.tooltip),this.tooltip=null)},async _show(s,i){this.tooltip=t.append(this.container,`<div id="${i}" class="uk-${this.$options.name}" role="tooltip"> <div class="uk-${this.$options.name}-inner">${s}</div> </div>`),t.on(this.tooltip,"toggled",(o,e)=>{if(!e)return;const n=()=>this.positionAt(this.tooltip,this.$el);n();const[r,h]=W(this.tooltip,this.$el,this.pos);this.origin=this.axis==="y"?`${t.flipPosition(r)}-${h}`:`${h}-${t.flipPosition(r)}`;const c=[t.once(document,`keydown ${t.pointerDown}`,this.hide,!1,a=>a.type===t.pointerDown&&!this.$el.contains(a.target)||a.type==="keydown"&&a.keyCode===U.ESC),t.on([document,...t.overflowParents(this.$el)],"scroll",n,{passive:!0})];t.once(this.tooltip,"hide",()=>c.forEach(a=>a()),{self:!0})}),await this.toggleElement(this.tooltip,!0)||this.hide()}},events:{[`focus ${t.pointerEnter} ${t.pointerDown}`](s){(!t.isTouch(s)||s.type===t.pointerDown)&&this.show()}}};function j(s){t.isFocusable(s)||t.attr(s,"tabindex","0")}function W(s,i,[o,e]){const n=t.offset(s),r=t.offset(i),h=[["left","right"],["top","bottom"]];for(const a of h){if(n[a[0]]>=r[a[1]]){o=a[1];break}if(n[a[1]]<=r[a[0]]){o=a[0];break}}return e=(t.includes(h[0],o)?h[1]:h[0]).find(a=>n[a]===r[a])||"center",[o,e]}function _(s){const{el:i,id:o,data:e}=s;return["delay","title"].reduce((n,r)=>({[r]:t.data(i,r),...n}),{...p(t.data(i,o),["title"]),...e})}return typeof window<"u"&&window.UIkit&&window.UIkit.component("tooltip",u),u});