diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 93be465..0000000 --- a/.babelrc +++ /dev/null @@ -1,13 +0,0 @@ -{ - "presets": [ - ["@babel/preset-env", { - "modules": "umd", - "useBuiltIns": "entry" - }] - ], - "plugins": [ - "babel-plugin-add-module-exports", - "babel-plugin-class-display-name", - "@babel/plugin-transform-runtime" - ] -} diff --git a/dist/src/index.d.ts b/dist/index.d.ts similarity index 97% rename from dist/src/index.d.ts rename to dist/index.d.ts index e1531b1..afc26e1 100644 --- a/dist/src/index.d.ts +++ b/dist/index.d.ts @@ -1,4 +1,4 @@ -import { TooltipContent, TooltipOptions } from '../types'; +import { TooltipContent, TooltipOptions } from './types'; /** * * Tiny any beautiful tooltips module. @@ -84,10 +84,6 @@ export default class Tooltip { * Module Preparation method */ private prepare; - /** - * Append CSS file - */ - private loadStyles; /** * Calculates element coords and moves tooltip bottom of the element * diff --git a/dist/tooltip.js b/dist/tooltip.js deleted file mode 100644 index fe24052..0000000 --- a/dist/tooltip.js +++ /dev/null @@ -1,11 +0,0 @@ -/*! - * CodeX.Tooltips - * - * @version 1.0.3 - * - * @licence MIT - * @author CodeX - * - * - */ -!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Tooltip=e():t.Tooltip=e()}(window,(function(){return function(t){var e={};function o(i){if(e[i])return e[i].exports;var n=e[i]={i:i,l:!1,exports:{}};return t[i].call(n.exports,n,n.exports,o),n.l=!0,n.exports}return o.m=t,o.c=e,o.d=function(t,e,i){o.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},o.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(o.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)o.d(i,n,function(e){return t[e]}.bind(null,n));return i},o.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return o.d(e,"a",e),e},o.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},o.p="",o(o.s=0)}([function(t,e,o){t.exports=o(1)},function(t,e,o){"use strict";o.r(e),o.d(e,"default",(function(){return i}));class i{constructor(){this.nodes={wrapper:null,content:null},this.showed=!1,this.offsetTop=10,this.offsetLeft=10,this.offsetRight=10,this.hidingDelay=0,this.handleWindowScroll=()=>{this.showed&&this.hide(!0)},this.loadStyles(),this.prepare(),window.addEventListener("scroll",this.handleWindowScroll,{passive:!0})}get CSS(){return{tooltip:"ct",tooltipContent:"ct__content",tooltipShown:"ct--shown",placement:{left:"ct--left",bottom:"ct--bottom",right:"ct--right",top:"ct--top"}}}show(t,e,o){this.nodes.wrapper||this.prepare(),this.hidingTimeout&&clearTimeout(this.hidingTimeout);const i=Object.assign({placement:"bottom",marginTop:0,marginLeft:0,marginRight:0,marginBottom:0,delay:70,hidingDelay:0},o);if(i.hidingDelay&&(this.hidingDelay=i.hidingDelay),this.nodes.content.innerHTML="","string"==typeof e)this.nodes.content.appendChild(document.createTextNode(e));else{if(!(e instanceof Node))throw Error("[CodeX Tooltip] Wrong type of «content» passed. It should be an instance of Node or String. But "+typeof e+" given.");this.nodes.content.appendChild(e)}switch(this.nodes.wrapper.classList.remove(...Object.values(this.CSS.placement)),i.placement){case"top":this.placeTop(t,i);break;case"left":this.placeLeft(t,i);break;case"right":this.placeRight(t,i);break;case"bottom":default:this.placeBottom(t,i)}i&&i.delay?this.showingTimeout=setTimeout(()=>{this.nodes.wrapper.classList.add(this.CSS.tooltipShown),this.showed=!0},i.delay):(this.nodes.wrapper.classList.add(this.CSS.tooltipShown),this.showed=!0)}hide(t=!1){if(this.hidingDelay&&!t)return this.hidingTimeout&&clearTimeout(this.hidingTimeout),void(this.hidingTimeout=setTimeout(()=>{this.hide(!0)},this.hidingDelay));this.nodes.wrapper.classList.remove(this.CSS.tooltipShown),this.showed=!1,this.showingTimeout&&clearTimeout(this.showingTimeout)}onHover(t,e,o){t.addEventListener("mouseenter",()=>{this.show(t,e,o)}),t.addEventListener("mouseleave",()=>{this.hide()})}destroy(){this.nodes.wrapper.remove(),window.removeEventListener("scroll",this.handleWindowScroll)}prepare(){this.nodes.wrapper=this.make("div",this.CSS.tooltip),this.nodes.content=this.make("div",this.CSS.tooltipContent),this.append(this.nodes.wrapper,this.nodes.content),this.append(document.body,this.nodes.wrapper)}loadStyles(){const t="codex-tooltips-style";if(document.getElementById(t))return;const e=o(2),i=this.make("style",null,{textContent:e.toString(),id:t});this.prepend(document.head,i)}placeBottom(t,e){const o=t.getBoundingClientRect(),i=o.left+t.clientWidth/2-this.nodes.wrapper.offsetWidth/2,n=o.bottom+window.pageYOffset+this.offsetTop+e.marginTop;this.applyPlacement("bottom",i,n)}placeTop(t,e){const o=t.getBoundingClientRect(),i=o.left+t.clientWidth/2-this.nodes.wrapper.offsetWidth/2,n=o.top+window.pageYOffset-this.nodes.wrapper.clientHeight-this.offsetTop;this.applyPlacement("top",i,n)}placeLeft(t,e){const o=t.getBoundingClientRect(),i=o.left-this.nodes.wrapper.offsetWidth-this.offsetLeft-e.marginLeft,n=o.top+window.pageYOffset+t.clientHeight/2-this.nodes.wrapper.offsetHeight/2;this.applyPlacement("left",i,n)}placeRight(t,e){const o=t.getBoundingClientRect(),i=o.right+this.offsetRight+e.marginRight,n=o.top+window.pageYOffset+t.clientHeight/2-this.nodes.wrapper.offsetHeight/2;this.applyPlacement("right",i,n)}applyPlacement(t,e,o){this.nodes.wrapper.classList.add(this.CSS.placement[t]),this.nodes.wrapper.style.left=e+"px",this.nodes.wrapper.style.top=o+"px"}make(t,e=null,o={}){const i=document.createElement(t);Array.isArray(e)?i.classList.add(...e):e&&i.classList.add(e);for(const t in o)o.hasOwnProperty(t)&&(i[t]=o[t]);return i}append(t,e){Array.isArray(e)?e.forEach(e=>t.appendChild(e)):t.appendChild(e)}prepend(t,e){Array.isArray(e)?(e=e.reverse()).forEach(e=>t.prepend(e)):t.prepend(e)}}},function(t,e){t.exports='.ct{z-index:999;opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;-webkit-transition:opacity 50ms ease-in,-webkit-transform 70ms cubic-bezier(.215,.61,.355,1);transition:opacity 50ms ease-in,-webkit-transform 70ms cubic-bezier(.215,.61,.355,1);transition:opacity 50ms ease-in,transform 70ms cubic-bezier(.215,.61,.355,1);transition:opacity 50ms ease-in,transform 70ms cubic-bezier(.215,.61,.355,1),-webkit-transform 70ms cubic-bezier(.215,.61,.355,1);will-change:opacity,top,left;-webkit-box-shadow:0 8px 12px 0 rgba(29,32,43,.17),0 4px 5px -3px rgba(5,6,12,.49);box-shadow:0 8px 12px 0 rgba(29,32,43,.17),0 4px 5px -3px rgba(5,6,12,.49);border-radius:9px}.ct,.ct:before{position:absolute;top:0;left:0}.ct:before{content:"";bottom:0;right:0;background-color:#1d202b;z-index:-1;border-radius:4px}@supports(-webkit-mask-box-image:url("")){.ct:before{border-radius:0;-webkit-mask-box-image:url(\'data:image/svg+xml;charset=utf-8,\') 48% 41% 37.9% 53.3%}}@media (--mobile){.ct{display:none}}.ct__content{padding:6px 10px;color:#cdd1e0;font-size:12px;text-align:center;letter-spacing:.02em;line-height:1em}.ct:after{content:"";width:8px;height:8px;position:absolute;background-color:#1d202b;z-index:-1}.ct--bottom{-webkit-transform:translateY(5px);transform:translateY(5px)}.ct--bottom:after{top:-3px;left:50%;-webkit-transform:translateX(-50%) rotate(-45deg);transform:translateX(-50%) rotate(-45deg)}.ct--top{-webkit-transform:translateY(-5px);transform:translateY(-5px)}.ct--top:after{top:auto;bottom:-3px;left:50%;-webkit-transform:translateX(-50%) rotate(-45deg);transform:translateX(-50%) rotate(-45deg)}.ct--left{-webkit-transform:translateX(-5px);transform:translateX(-5px)}.ct--left:after{top:50%;left:auto;right:0;-webkit-transform:translate(41.6%,-50%) rotate(-45deg);transform:translate(41.6%,-50%) rotate(-45deg)}.ct--right{-webkit-transform:translateX(5px);transform:translateX(5px)}.ct--right:after{top:50%;left:0;-webkit-transform:translate(-41.6%,-50%) rotate(-45deg);transform:translate(-41.6%,-50%) rotate(-45deg)}.ct--shown{opacity:1;-webkit-transform:none;transform:none}'}]).default})); \ No newline at end of file diff --git a/dist/tooltip.mjs b/dist/tooltip.mjs new file mode 100644 index 0000000..325a611 --- /dev/null +++ b/dist/tooltip.mjs @@ -0,0 +1,194 @@ +(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode(`.ct{z-index:999;opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;-webkit-transition:opacity 50ms ease-in,-webkit-transform 70ms cubic-bezier(.215,.61,.355,1);transition:opacity 50ms ease-in,-webkit-transform 70ms cubic-bezier(.215,.61,.355,1);transition:opacity 50ms ease-in,transform 70ms cubic-bezier(.215,.61,.355,1);transition:opacity 50ms ease-in,transform 70ms cubic-bezier(.215,.61,.355,1),-webkit-transform 70ms cubic-bezier(.215,.61,.355,1);will-change:opacity,top,left;-webkit-box-shadow:0 8px 12px 0 rgba(29,32,43,.17),0 4px 5px -3px rgba(5,6,12,.49);box-shadow:0 8px 12px #1d202b2b,0 4px 5px -3px #05060c7d;border-radius:9px}.ct,.ct:before{position:absolute;top:0;left:0}.ct:before{content:"";bottom:0;right:0;background-color:#1d202b;z-index:-1;border-radius:4px}@supports (-webkit-mask-box-image:url()){.ct:before{border-radius:0;-webkit-mask-box-image:url('data:image/svg+xml;charset=utf-8,') 48% 41% 37.9% 53.3%}}@media (--mobile){.ct{display:none}}.ct__content{padding:6px 10px;color:#cdd1e0;font-size:12px;text-align:center;letter-spacing:.02em;line-height:1em}.ct:after{content:"";width:8px;height:8px;position:absolute;background-color:#1d202b;z-index:-1}.ct--bottom{-webkit-transform:translateY(5px);transform:translateY(5px)}.ct--bottom:after{top:-3px;left:50%;-webkit-transform:translateX(-50%) rotate(-45deg);transform:translate(-50%) rotate(-45deg)}.ct--top{-webkit-transform:translateY(-5px);transform:translateY(-5px)}.ct--top:after{top:auto;bottom:-3px;left:50%;-webkit-transform:translateX(-50%) rotate(-45deg);transform:translate(-50%) rotate(-45deg)}.ct--left{-webkit-transform:translateX(-5px);transform:translate(-5px)}.ct--left:after{top:50%;left:auto;right:0;-webkit-transform:translate(41.6%,-50%) rotate(-45deg);transform:translate(41.6%,-50%) rotate(-45deg)}.ct--right{-webkit-transform:translateX(5px);transform:translate(5px)}.ct--right:after{top:50%;left:0;-webkit-transform:translate(-41.6%,-50%) rotate(-45deg);transform:translate(-41.6%,-50%) rotate(-45deg)}.ct--shown{opacity:1;-webkit-transform:none;transform:none}`)),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})(); +class h { + /** + * Module constructor + */ + constructor() { + this.nodes = { + wrapper: null, + content: null + }, this.showed = !1, this.offsetTop = 10, this.offsetLeft = 10, this.offsetRight = 10, this.hidingDelay = 0, this.handleWindowScroll = () => { + this.showed && this.hide(!0); + }, this.prepare(), window.addEventListener("scroll", this.handleWindowScroll, { passive: !0 }); + } + /** + * Tooltip CSS classes + */ + get CSS() { + return { + tooltip: "ct", + tooltipContent: "ct__content", + tooltipShown: "ct--shown", + placement: { + left: "ct--left", + bottom: "ct--bottom", + right: "ct--right", + top: "ct--top" + } + }; + } + /** + * Show Tooltip near passed element with specified HTML content + * + * @param {HTMLElement} element - target element to place Tooltip near that + * @param {TooltipContent} content — any HTML Element of String that will be used as content + * @param {TooltipOptions} options — Available options {@link TooltipOptions} + */ + show(t, e, i) { + this.nodes.wrapper || this.prepare(), this.hidingTimeout && clearTimeout(this.hidingTimeout); + const o = Object.assign({ + placement: "bottom", + marginTop: 0, + marginLeft: 0, + marginRight: 0, + marginBottom: 0, + delay: 70, + hidingDelay: 0 + }, i); + if (o.hidingDelay && (this.hidingDelay = o.hidingDelay), this.nodes.content.innerHTML = "", typeof e == "string") + this.nodes.content.appendChild(document.createTextNode(e)); + else if (e instanceof Node) + this.nodes.content.appendChild(e); + else + throw Error("[CodeX Tooltip] Wrong type of «content» passed. It should be an instance of Node or String. But " + typeof e + " given."); + switch (this.nodes.wrapper.classList.remove(...Object.values(this.CSS.placement)), o.placement) { + case "top": + this.placeTop(t, o); + break; + case "left": + this.placeLeft(t, o); + break; + case "right": + this.placeRight(t, o); + break; + case "bottom": + default: + this.placeBottom(t, o); + break; + } + o && o.delay ? this.showingTimeout = setTimeout(() => { + this.nodes.wrapper.classList.add(this.CSS.tooltipShown), this.showed = !0; + }, o.delay) : (this.nodes.wrapper.classList.add(this.CSS.tooltipShown), this.showed = !0); + } + /** + * Hide toolbox tooltip and clean content + * @param {boolean} skipDelay - forces hiding immediately + */ + hide(t = !1) { + if (this.hidingDelay && !t) { + this.hidingTimeout && clearTimeout(this.hidingTimeout), this.hidingTimeout = setTimeout(() => { + this.hide(!0); + }, this.hidingDelay); + return; + } + this.nodes.wrapper.classList.remove(this.CSS.tooltipShown), this.showed = !1, this.showingTimeout && clearTimeout(this.showingTimeout); + } + /** + * Mouseover/Mouseleave decorator + * + * @param {HTMLElement} element - target element to place Tooltip near that + * @param {TooltipContent} content — any HTML Element of String that will be used as content + * @param {TooltipOptions} options — Available options {@link TooltipOptions} + */ + onHover(t, e, i) { + t.addEventListener("mouseenter", () => { + this.show(t, e, i); + }), t.addEventListener("mouseleave", () => { + this.hide(); + }); + } + /** + * Release DOM and event listeners + */ + destroy() { + this.nodes.wrapper.remove(), window.removeEventListener("scroll", this.handleWindowScroll); + } + /** + * Module Preparation method + */ + prepare() { + this.nodes.wrapper = this.make("div", this.CSS.tooltip), this.nodes.content = this.make("div", this.CSS.tooltipContent), this.append(this.nodes.wrapper, this.nodes.content), this.append(document.body, this.nodes.wrapper); + } + /** + * Calculates element coords and moves tooltip bottom of the element + * + * @param {HTMLElement} element + * @param {TooltipOptions} showingOptions + */ + placeBottom(t, e) { + const i = t.getBoundingClientRect(), s = i.left + t.clientWidth / 2 - this.nodes.wrapper.offsetWidth / 2, o = i.bottom + window.pageYOffset + this.offsetTop + e.marginTop; + this.applyPlacement("bottom", s, o); + } + /** + * Calculates element coords and moves tooltip top of the element + * + * @param {HTMLElement} element + * @param {TooltipOptions} showingOptions + */ + placeTop(t, e) { + const i = t.getBoundingClientRect(), s = i.left + t.clientWidth / 2 - this.nodes.wrapper.offsetWidth / 2, o = i.top + window.pageYOffset - this.nodes.wrapper.clientHeight - this.offsetTop; + this.applyPlacement("top", s, o); + } + /** + * Calculates element coords and moves tooltip left of the element + * + * @param {HTMLElement} element + * @param {TooltipOptions} showingOptions + */ + placeLeft(t, e) { + const i = t.getBoundingClientRect(), s = i.left - this.nodes.wrapper.offsetWidth - this.offsetLeft - e.marginLeft, o = i.top + window.pageYOffset + t.clientHeight / 2 - this.nodes.wrapper.offsetHeight / 2; + this.applyPlacement("left", s, o); + } + /** + * Calculates element coords and moves tooltip right of the element + * + * @param {HTMLElement} element + * @param {TooltipOptions} showingOptions + */ + placeRight(t, e) { + const i = t.getBoundingClientRect(), s = i.right + this.offsetRight + e.marginRight, o = i.top + window.pageYOffset + t.clientHeight / 2 - this.nodes.wrapper.offsetHeight / 2; + this.applyPlacement("right", s, o); + } + /** + * Set wrapper position + */ + applyPlacement(t, e, i) { + this.nodes.wrapper.classList.add(this.CSS.placement[t]), this.nodes.wrapper.style.left = `${e}px`, this.nodes.wrapper.style.top = `${i}px`; + } + /** + * Helper for making Elements with classname and attributes + * + * @param {string} tagName - new Element tag name + * @param {array|string} classNames - list or name of CSS classname(s) + * @param {Object} attributes - any attributes + * @return {HTMLElement} + */ + make(t, e = null, i = {}) { + const s = document.createElement(t); + Array.isArray(e) ? s.classList.add(...e) : e && s.classList.add(e); + for (const o in i) + i.hasOwnProperty(o) && (s[o] = i[o]); + return s; + } + /** + * Append one or several elements to the parent + * + * @param {Element|DocumentFragment} parent - where to append + * @param {Element|Element[]} elements - element or elements list + */ + append(t, e) { + Array.isArray(e) ? e.forEach((i) => t.appendChild(i)) : t.appendChild(e); + } + /** + * Append element or a couple to the beginning of the parent elements + * + * @param {Element} parent - where to append + * @param {Element|Element[]} elements - element or elements list + */ + prepend(t, e) { + Array.isArray(e) ? (e = e.reverse(), e.forEach((i) => t.prepend(i))) : t.prepend(e); + } +} +export { + h as default +}; diff --git a/dist/tooltip.umd.js b/dist/tooltip.umd.js new file mode 100644 index 0000000..869a12b --- /dev/null +++ b/dist/tooltip.umd.js @@ -0,0 +1,2 @@ +(function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode(`.ct{z-index:999;opacity:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;-webkit-transition:opacity 50ms ease-in,-webkit-transform 70ms cubic-bezier(.215,.61,.355,1);transition:opacity 50ms ease-in,-webkit-transform 70ms cubic-bezier(.215,.61,.355,1);transition:opacity 50ms ease-in,transform 70ms cubic-bezier(.215,.61,.355,1);transition:opacity 50ms ease-in,transform 70ms cubic-bezier(.215,.61,.355,1),-webkit-transform 70ms cubic-bezier(.215,.61,.355,1);will-change:opacity,top,left;-webkit-box-shadow:0 8px 12px 0 rgba(29,32,43,.17),0 4px 5px -3px rgba(5,6,12,.49);box-shadow:0 8px 12px #1d202b2b,0 4px 5px -3px #05060c7d;border-radius:9px}.ct,.ct:before{position:absolute;top:0;left:0}.ct:before{content:"";bottom:0;right:0;background-color:#1d202b;z-index:-1;border-radius:4px}@supports (-webkit-mask-box-image:url()){.ct:before{border-radius:0;-webkit-mask-box-image:url('data:image/svg+xml;charset=utf-8,') 48% 41% 37.9% 53.3%}}@media (--mobile){.ct{display:none}}.ct__content{padding:6px 10px;color:#cdd1e0;font-size:12px;text-align:center;letter-spacing:.02em;line-height:1em}.ct:after{content:"";width:8px;height:8px;position:absolute;background-color:#1d202b;z-index:-1}.ct--bottom{-webkit-transform:translateY(5px);transform:translateY(5px)}.ct--bottom:after{top:-3px;left:50%;-webkit-transform:translateX(-50%) rotate(-45deg);transform:translate(-50%) rotate(-45deg)}.ct--top{-webkit-transform:translateY(-5px);transform:translateY(-5px)}.ct--top:after{top:auto;bottom:-3px;left:50%;-webkit-transform:translateX(-50%) rotate(-45deg);transform:translate(-50%) rotate(-45deg)}.ct--left{-webkit-transform:translateX(-5px);transform:translate(-5px)}.ct--left:after{top:50%;left:auto;right:0;-webkit-transform:translate(41.6%,-50%) rotate(-45deg);transform:translate(41.6%,-50%) rotate(-45deg)}.ct--right{-webkit-transform:translateX(5px);transform:translate(5px)}.ct--right:after{top:50%;left:0;-webkit-transform:translate(-41.6%,-50%) rotate(-45deg);transform:translate(-41.6%,-50%) rotate(-45deg)}.ct--shown{opacity:1;-webkit-transform:none;transform:none}`)),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})(); +(function(n,h){typeof exports=="object"&&typeof module<"u"?module.exports=h():typeof define=="function"&&define.amd?define(h):(n=typeof globalThis<"u"?globalThis:n||self,n.Tooltip=h())})(this,function(){"use strict";class n{constructor(){this.nodes={wrapper:null,content:null},this.showed=!1,this.offsetTop=10,this.offsetLeft=10,this.offsetRight=10,this.hidingDelay=0,this.handleWindowScroll=()=>{this.showed&&this.hide(!0)},this.prepare(),window.addEventListener("scroll",this.handleWindowScroll,{passive:!0})}get CSS(){return{tooltip:"ct",tooltipContent:"ct__content",tooltipShown:"ct--shown",placement:{left:"ct--left",bottom:"ct--bottom",right:"ct--right",top:"ct--top"}}}show(t,e,i){this.nodes.wrapper||this.prepare(),this.hidingTimeout&&clearTimeout(this.hidingTimeout);const o=Object.assign({placement:"bottom",marginTop:0,marginLeft:0,marginRight:0,marginBottom:0,delay:70,hidingDelay:0},i);if(o.hidingDelay&&(this.hidingDelay=o.hidingDelay),this.nodes.content.innerHTML="",typeof e=="string")this.nodes.content.appendChild(document.createTextNode(e));else if(e instanceof Node)this.nodes.content.appendChild(e);else throw Error("[CodeX Tooltip] Wrong type of «content» passed. It should be an instance of Node or String. But "+typeof e+" given.");switch(this.nodes.wrapper.classList.remove(...Object.values(this.CSS.placement)),o.placement){case"top":this.placeTop(t,o);break;case"left":this.placeLeft(t,o);break;case"right":this.placeRight(t,o);break;case"bottom":default:this.placeBottom(t,o);break}o&&o.delay?this.showingTimeout=setTimeout(()=>{this.nodes.wrapper.classList.add(this.CSS.tooltipShown),this.showed=!0},o.delay):(this.nodes.wrapper.classList.add(this.CSS.tooltipShown),this.showed=!0)}hide(t=!1){if(this.hidingDelay&&!t){this.hidingTimeout&&clearTimeout(this.hidingTimeout),this.hidingTimeout=setTimeout(()=>{this.hide(!0)},this.hidingDelay);return}this.nodes.wrapper.classList.remove(this.CSS.tooltipShown),this.showed=!1,this.showingTimeout&&clearTimeout(this.showingTimeout)}onHover(t,e,i){t.addEventListener("mouseenter",()=>{this.show(t,e,i)}),t.addEventListener("mouseleave",()=>{this.hide()})}destroy(){this.nodes.wrapper.remove(),window.removeEventListener("scroll",this.handleWindowScroll)}prepare(){this.nodes.wrapper=this.make("div",this.CSS.tooltip),this.nodes.content=this.make("div",this.CSS.tooltipContent),this.append(this.nodes.wrapper,this.nodes.content),this.append(document.body,this.nodes.wrapper)}placeBottom(t,e){const i=t.getBoundingClientRect(),s=i.left+t.clientWidth/2-this.nodes.wrapper.offsetWidth/2,o=i.bottom+window.pageYOffset+this.offsetTop+e.marginTop;this.applyPlacement("bottom",s,o)}placeTop(t,e){const i=t.getBoundingClientRect(),s=i.left+t.clientWidth/2-this.nodes.wrapper.offsetWidth/2,o=i.top+window.pageYOffset-this.nodes.wrapper.clientHeight-this.offsetTop;this.applyPlacement("top",s,o)}placeLeft(t,e){const i=t.getBoundingClientRect(),s=i.left-this.nodes.wrapper.offsetWidth-this.offsetLeft-e.marginLeft,o=i.top+window.pageYOffset+t.clientHeight/2-this.nodes.wrapper.offsetHeight/2;this.applyPlacement("left",s,o)}placeRight(t,e){const i=t.getBoundingClientRect(),s=i.right+this.offsetRight+e.marginRight,o=i.top+window.pageYOffset+t.clientHeight/2-this.nodes.wrapper.offsetHeight/2;this.applyPlacement("right",s,o)}applyPlacement(t,e,i){this.nodes.wrapper.classList.add(this.CSS.placement[t]),this.nodes.wrapper.style.left=`${e}px`,this.nodes.wrapper.style.top=`${i}px`}make(t,e=null,i={}){const s=document.createElement(t);Array.isArray(e)?s.classList.add(...e):e&&s.classList.add(e);for(const o in i)i.hasOwnProperty(o)&&(s[o]=i[o]);return s}append(t,e){Array.isArray(e)?e.forEach(i=>t.appendChild(i)):t.appendChild(e)}prepend(t,e){Array.isArray(e)?(e=e.reverse(),e.forEach(i=>t.prepend(i))):t.prepend(e)}}return n}); diff --git a/dist/types/tooltip-content.d.ts b/dist/types/tooltip-content.d.ts index 6d5fd03..f625452 100644 --- a/dist/types/tooltip-content.d.ts +++ b/dist/types/tooltip-content.d.ts @@ -1,5 +1,5 @@ /** * Tooltip supported content */ -declare type TooltipContent = HTMLElement | DocumentFragment | Node | string; +type TooltipContent = HTMLElement | DocumentFragment | Node | string; export default TooltipContent; diff --git a/example/index.html b/example/index.html index 39df180..2402f3f 100644 --- a/example/index.html +++ b/example/index.html @@ -46,7 +46,7 @@ Right - +