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.14.1 | https://www.getuikit.com | (c) 2014 - 2022 YOOtheme | MIT License */(function(s,c){typeof exports=="object"&&typeof module<"u"?module.exports=c(require("uikit-util")):typeof define=="function"&&define.amd?define("uikittooltip",["uikit-util"],c):(s=typeof globalThis<"u"?globalThis:s||self,s.UIkitTooltip=c(s.UIkit.util))})(this,function(s){"use strict";var c={props:{container:Boolean},data:{container:!0},computed:{container(o){let{container:e}=o;return e===!0&&this.$container||e&&s.$(e)}}},u={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-togglabe-enter",clsLeave:"uk-togglabe-leave",initProps:{overflow:"",height:"",paddingTop:"",paddingBottom:"",marginTop:"",marginBottom:"",boxShadow:""},hideProps:{overflow:"hidden",height:0,paddingTop:0,paddingBottom:0,marginTop:0,marginBottom:0,boxShadow:"none"}},computed:{hasAnimation(o){let{animation:e}=o;return!!e[0]},hasTransition(o){let{animation:e}=o;return this.hasAnimation&&e[0]===!0}},methods:{toggleElement(o,e,r){return new Promise(a=>Promise.all(s.toNodes(o).map(i=>{const t=s.isBoolean(e)?e:!this.isToggled(i);if(!s.trigger(i,"before"+(t?"show":"hide"),[this]))return Promise.reject();const d=(s.isFunction(r)?r:r===!1||!this.hasAnimation?this._toggle:this.hasTransition?v(this):T(this))(i,t),h=t?this.clsEnter:this.clsLeave;s.addClass(i,h),s.trigger(i,t?"show":"hide",[this]);const n=()=>{s.removeClass(i,h),s.trigger(i,t?"shown":"hidden",[this]),this.$update(i)};return d?d.then(n,()=>(s.removeClass(i,h),Promise.reject())):n()})).then(a,s.noop))},isToggled(o){return o===void 0&&(o=this.$el),[o]=s.toNodes(o),s.hasClass(o,this.clsEnter)?!0:s.hasClass(o,this.clsLeave)?!1:this.cls?s.hasClass(o,this.cls.split(" ")[0]):s.isVisible(o)},_toggle(o,e){if(!o)return;e=Boolean(e);let r;this.cls?(r=s.includes(this.cls," ")||e!==s.hasClass(o,this.cls),r&&s.toggleClass(o,this.cls,s.includes(this.cls," ")?void 0:e)):(r=e===o.hidden,r&&(o.hidden=!e)),s.$$("[autofocus]",o).some(a=>s.isVisible(a)?a.focus()||!0:a.blur()),r&&(s.trigger(o,"toggled",[e,this]),this.$update(o))}}};function v(o){let{isToggled:e,duration:r,velocity:a,initProps:i,hideProps:t,transition:d,_toggle:h}=o;return(n,p)=>{const l=s.Transition.inProgress(n),w=n.hasChildNodes()?s.toFloat(s.css(n.firstElementChild,"marginTop"))+s.toFloat(s.css(n.lastElementChild,"marginBottom")):0,f=s.isVisible(n)?s.height(n)+(l?0:w):0;s.Transition.cancel(n),e(n)||h(n,!0),s.height(n,""),s.fastdom.flush();const g=s.height(n)+(l?0:w);return r=a*n.offsetHeight+r,s.height(n,f),(p?s.Transition.start(n,{...i,overflow:"hidden",height:g},Math.round(r*(1-f/g)),d):s.Transition.start(n,t,Math.round(r*(f/g)),d).then(()=>h(n,!1))).then(()=>s.css(n,i))}}function T(o){return(e,r)=>{s.Animation.cancel(e);const{animation:a,duration:i,_toggle:t}=o;return r?(t(e,!0),s.Animation.in(e,a[0],i,o.origin)):s.Animation.out(e,a[1]||a[0],i,o.origin).then(()=>t(e,!1))}}var b={props:{pos:String,offset:null,flip:Boolean},data:{pos:"bottom-"+(s.isRtl?"right":"left"),flip:!0,offset:!1,viewportPadding:10},connected(){this.pos=this.$props.pos.split("-").concat("center").slice(0,2),this.axis=s.includes(["top","bottom"],this.pos[0])?"y":"x"},methods:{positionAt(o,e,r){const[a,i]=this.pos;let{offset:t}=this;if(!s.isNumeric(t)){const h=s.$(t);t=h?s.offset(h)[this.axis==="x"?"left":"top"]-s.offset(e)[this.axis==="x"?"right":"bottom"]:0}t=s.toPx(t)+s.toPx(s.getCssVar("position-offset",o)),t=[s.includes(["left","top"],a)?-t:+t,0];const d={element:[s.flipPosition(a),i],target:[a,i]};if(this.axis==="y"){for(const h in d)d[h]=d[h].reverse();t=t.reverse()}s.positionAt(o,e,{attach:d,offset:t,boundary:r,viewportPadding:this.boundaryAlign?0:this.viewportPadding,flip:this.flip})}}},m={mixins:[c,u,b],args:"title",props:{delay:Number,title:String},data:{pos:"top",title:"",delay:0,animation:["uk-animation-scale-up"],duration:100,cls:"uk-active"},beforeConnect(){this._hasTitle=s.hasAttr(this.$el,"title"),s.attr(this.$el,"title",""),this.updateAria(!1),$(this.$el)},disconnected(){this.hide(),s.attr(this.$el,"title",this._hasTitle?this.title:null)},methods:{show(){this.isToggled(this.tooltip||null)||!this.title||(this._unbind=s.once(document,"show keydown "+s.pointerDown,this.hide,!1,o=>o.type===s.pointerDown&&!s.within(o.target,this.$el)||o.type==="keydown"&&o.keyCode===27||o.type==="show"&&o.detail[0]!==this&&o.detail[0].$name===this.$name),clearTimeout(this.showTimer),this.showTimer=setTimeout(this._show,this.delay))},async hide(){s.matches(this.$el,"input:focus")||(clearTimeout(this.showTimer),this.isToggled(this.tooltip||null)&&(await this.toggleElement(this.tooltip,!1,!1),s.remove(this.tooltip),this.tooltip=null,this._unbind()))},_show(){this.tooltip=s.append(this.container,'<div class="uk-'+this.$options.name+'"> <div class="uk-'+this.$options.name+'-inner">'+this.title+"</div> </div>"),s.on(this.tooltip,"toggled",(o,e)=>{if(this.updateAria(e),!e)return;this.positionAt(this.tooltip,this.$el);const[r,a]=y(this.tooltip,this.$el,this.pos);this.origin=this.axis==="y"?s.flipPosition(r)+"-"+a:a+"-"+s.flipPosition(r)}),this.toggleElement(this.tooltip,!0)},updateAria(o){s.attr(this.$el,"aria-expanded",o)}},events:{focus:"show",blur:"hide",[s.pointerEnter+" "+s.pointerLeave](o){s.isTouch(o)||this[o.type===s.pointerEnter?"show":"hide"]()},[s.pointerDown](o){s.isTouch(o)&&this.show()}}};function $(o){s.isFocusable(o)||s.attr(o,"tabindex","0")}function y(o,e,r){let[a,i]=r;const t=s.offset(o),d=s.offset(e),h=[["left","right"],["top","bottom"]];for(const p of h){if(t[p[0]]>=d[p[1]]){a=p[1];break}if(t[p[1]]<=d[p[0]]){a=p[0];break}}const n=s.includes(h[0],a)?h[1]:h[0];return t[n[0]]===d[n[0]]?i=n[0]:t[n[1]]===d[n[1]]?i=n[1]:i="center",[a,i]}return typeof window<"u"&&window.UIkit&&window.UIkit.component("tooltip",m),m});