diff --git a/assets/style-B5PVp83N.css b/assets/style-B5PVp83N.css new file mode 100644 index 0000000..c2433b1 --- /dev/null +++ b/assets/style-B5PVp83N.css @@ -0,0 +1 @@ +body{margin:0;min-height:100vh;display:grid;place-items:center;font-family:system-ui,sans-serif}.container{display:flex;gap:2rem;flex-wrap:wrap;padding:2rem}button{padding:.5rem 1rem;background:#4f46e5;color:#fff;border:none;border-radius:.25rem;cursor:pointer}._3x4ZIcu-{position:absolute;background:#1f2937;color:#fff;padding:.75rem;border-radius:.375rem;max-width:200px;z-index:50;visibility:hidden;opacity:0;transition:opacity .2s}._3x4ZIcu-.JIt36hCJ{visibility:visible;opacity:1}._3x4ZIcu-:before{content:"";position:absolute;width:0;height:0;border:6px solid transparent}._3x4ZIcu-[data-position=top]:before{border-top-color:#1f2937;bottom:-12px;left:50%;transform:translate(-50%)}._3x4ZIcu-[data-position=bottom]:before{border-bottom-color:#1f2937;top:-12px;left:50%;transform:translate(-50%)}._3x4ZIcu-[data-position=left]:before{border-left-color:#1f2937;right:-12px;top:50%;transform:translateY(-50%)}._3x4ZIcu-[data-position=right]:before{border-right-color:#1f2937;left:-12px;top:50%;transform:translateY(-50%)} diff --git a/assets/style-Db7VC2rs.css b/assets/style-Db7VC2rs.css deleted file mode 100644 index 64d8abf..0000000 --- a/assets/style-Db7VC2rs.css +++ /dev/null @@ -1 +0,0 @@ -body{margin:0;min-height:100vh;display:grid;place-items:center;font-family:system-ui,sans-serif}.container{display:flex;gap:2rem;flex-wrap:wrap;padding:2rem}.tooltip-trigger,.MYkh1v7x{padding:.5rem 1rem;background:#4f46e5;color:#fff;border:none;border-radius:.25rem;cursor:pointer}._3x4ZIcu-{position:absolute;background:#1f2937;color:#fff;padding:.75rem;border-radius:.375rem;max-width:200px;z-index:50;visibility:hidden;opacity:0;transition:opacity .2s}._3x4ZIcu-.JIt36hCJ{visibility:visible;opacity:1}._3x4ZIcu-:before{content:"";position:absolute;width:0;height:0;border:6px solid transparent}._3x4ZIcu-[data-position=top]:before{border-top-color:#1f2937;bottom:-12px;left:50%;transform:translate(-50%)}._3x4ZIcu-[data-position=bottom]:before{border-bottom-color:#1f2937;top:-12px;left:50%;transform:translate(-50%)}._3x4ZIcu-[data-position=left]:before{border-left-color:#1f2937;right:-12px;top:50%;transform:translateY(-50%)}._3x4ZIcu-[data-position=right]:before{border-right-color:#1f2937;left:-12px;top:50%;transform:translateY(-50%)} diff --git a/demo.min.js b/demo.min.js index a0a5252..298a5fb 100644 --- a/demo.min.js +++ b/demo.min.js @@ -1 +1 @@ -!function(){const t=document.createElement("link").relList;if(!(t&&t.supports&&t.supports("modulepreload"))){for(const t of document.querySelectorAll('link[rel="modulepreload"]'))e(t);new MutationObserver((t=>{for(const i of t)if("childList"===i.type)for(const t of i.addedNodes)"LINK"===t.tagName&&"modulepreload"===t.rel&&e(t)})).observe(document,{childList:!0,subtree:!0})}function e(t){if(t.ep)return;t.ep=!0;const e=function(t){const e={};return t.integrity&&(e.integrity=t.integrity),t.referrerPolicy&&(e.referrerPolicy=t.referrerPolicy),"use-credentials"===t.crossOrigin?e.credentials="include":"anonymous"===t.crossOrigin?e.credentials="omit":e.credentials="same-origin",e}(t);fetch(t.href,e)}}();const t="_3x4ZIcu-",e="JIt36hCJ",i={triggerName:"tooltip"};new class{options;tooltip;activeTriggerType=null;constructor(e=i){this.options=e,this.tooltip=document.createElement("div"),this.tooltip.className=t,document.body.appendChild(this.tooltip),this.setupEventListeners()}setupEventListeners(){const t=`data-${this.options.triggerName}`;document.addEventListener("mouseover",(e=>{const i=e.target.closest(`[${t}]`);if("click"!==this.activeTriggerType&&"click"!==i?.getAttribute(`${t}-type`)){const e=i?.getAttribute(`${t}`);e&&(this.show(i,e),this.activeTriggerType="hover")}})),document.addEventListener("mouseout",(e=>{const i=e.target.closest(`[${t}]`);"click"!==this.activeTriggerType&&"click"!==i?.getAttribute(`${t}-type`)&&this.hide()})),document.addEventListener("click",(e=>{const i=e.target.closest(`[${t}][${t}-type="click"]`);if(i)if(this.isVisible())this.hide();else{const e=i.getAttribute(`${t}`);this.show(i,e),this.activeTriggerType="click"}else this.hide()}))}isVisible(){return this.tooltip.classList.contains(e)}calculatePosition(t){const e=t.getBoundingClientRect(),i=this.tooltip.getBoundingClientRect(),o=[{name:"top",x:e.left+(e.width-i.width)/2,y:e.top-i.height-12},{name:"bottom",x:e.left+(e.width-i.width)/2,y:e.bottom+12},{name:"right",x:e.right+12,y:e.top+(e.height-i.height)/2},{name:"left",x:e.left-i.width-12,y:e.top+(e.height-i.height)/2}];for(const s of o)if(this.fitsInViewport(s.x,s.y,i.width,i.height))return s;return o[0]}fitsInViewport(t,e,i,o){return t>=0&&e>=0&&t+i<=window.innerWidth&&e+o<=window.innerHeight}show(t,i){this.tooltip.innerHTML=i??"",this.tooltip.classList.add(e);const o=this.calculatePosition(t);this.tooltip.style.left=`${o.x}px`,this.tooltip.style.top=`${o.y}px`,this.tooltip.dataset.position=o.name}hide(){this.tooltip.classList.remove(e),this.activeTriggerType=null}}; +!function(){const t=document.createElement("link").relList;if(!(t&&t.supports&&t.supports("modulepreload"))){for(const t of document.querySelectorAll('link[rel="modulepreload"]'))e(t);new MutationObserver((t=>{for(const i of t)if("childList"===i.type)for(const t of i.addedNodes)"LINK"===t.tagName&&"modulepreload"===t.rel&&e(t)})).observe(document,{childList:!0,subtree:!0})}function e(t){if(t.ep)return;t.ep=!0;const e=function(t){const e={};return t.integrity&&(e.integrity=t.integrity),t.referrerPolicy&&(e.referrerPolicy=t.referrerPolicy),"use-credentials"===t.crossOrigin?e.credentials="include":"anonymous"===t.crossOrigin?e.credentials="omit":e.credentials="same-origin",e}(t);fetch(t.href,e)}}();const t="_3x4ZIcu-",e="JIt36hCJ",i={triggerName:"tooltip"};class s{triggerName;tooltip;activeTriggerType=null;spacing=12;constructor(e=i){this.triggerName=`data-${e.triggerName}`,this.tooltip=document.createElement("div"),this.tooltip.className=t,document.body.appendChild(this.tooltip),this.setupEventListeners()}setupEventListeners(){document.addEventListener("mouseover",this.handleMouseOver),document.addEventListener("mouseout",this.handleMouseOut),document.addEventListener("click",this.handleClick),window.addEventListener("resize",this.handleResize),window.addEventListener("scroll",this.handleScroll,!0)}handleClick=t=>{const e=this.triggerName,i=t.target.closest(`[${e}][${e}-type="click"]`);if(i)if(this.isVisible())this.hide();else{const t=i.getAttribute(`${e}`);this.show(i,t),this.activeTriggerType="click"}else this.hide()};handleMouseOver=t=>{const e=this.triggerName,i=t.target.closest(`[${e}]`);if("click"!==this.activeTriggerType&&"click"!==i?.getAttribute(`${e}-type`)){const t=i?.getAttribute(`${e}`);t&&(this.show(i,t),this.activeTriggerType="hover")}};handleMouseOut=t=>{const e=this.triggerName,i=t.target.closest(`[${e}]`);"click"!==this.activeTriggerType&&"click"!==i?.getAttribute(`${e}-type`)&&this.hide()};handleResize=()=>{this.isVisible()&&this.hide()};handleScroll=()=>{this.isVisible()&&this.hide()};isVisible(){return this.tooltip.classList.contains(e)}calculatePosition(t){const e=t.getBoundingClientRect(),i=this.tooltip.getBoundingClientRect(),s=[{name:"top",x:e.left+(e.width-i.width)/2,y:e.top-i.height-this.spacing},{name:"bottom",x:e.left+(e.width-i.width)/2,y:e.bottom+this.spacing},{name:"left",x:e.left-i.width-this.spacing,y:e.top+(e.height-i.height)/2},{name:"right",x:e.right+this.spacing,y:e.top+(e.height-i.height)/2}];return s.find((t=>this.fitsInViewport(t,i)))||s[0]}fitsInViewport(t,e){return t.x>=0&&t.y>=0&&t.x+e.width<=window.innerWidth&&t.y+e.height<=window.innerHeight}show(t,i){this.tooltip.innerHTML=i??"",this.tooltip.classList.add(e);const s=this.calculatePosition(t);this.tooltip.style.left=`${s.x}px`,this.tooltip.style.top=`${s.y}px`,this.tooltip.dataset.position=s.name}hide(){this.tooltip.classList.remove(e),this.activeTriggerType=null}destroy(){document.removeEventListener("mouseover",this.handleMouseOver),document.removeEventListener("mouseout",this.handleMouseOut),document.removeEventListener("click",this.handleClick),window.removeEventListener("resize",this.handleResize),window.removeEventListener("scroll",this.handleScroll,!0),this.tooltip.remove()}}void 0!==window&&(window.SmartTooltip=s),new s; diff --git a/index.d.ts b/index.d.ts index caefd4d..d620954 100644 --- a/index.d.ts +++ b/index.d.ts @@ -2,19 +2,27 @@ interface SmartTooltipOptions { triggerName: string; } export declare class SmartTooltip { - private readonly options; + readonly triggerName: string; private readonly tooltip; private activeTriggerType; + private readonly spacing; constructor(options?: SmartTooltipOptions); private setupEventListeners; + private readonly handleClick; + private readonly handleMouseOver; + private readonly handleMouseOut; + private readonly handleResize; + private readonly handleScroll; private isVisible; - calculatePosition(trigger: Element): { - name: string; - x: number; - y: number; - }; - fitsInViewport(x: number, y: number, width: number, height: number): boolean; + private calculatePosition; + private fitsInViewport; private show; private hide; + destroy(): void; +} +declare global { + interface Window { + SmartTooltip: typeof SmartTooltip; + } } export default SmartTooltip; diff --git a/index.html b/index.html index 09220e8..ea8b238 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ -
\ No newline at end of file +Tooltip
\ No newline at end of file diff --git a/tooltip.cjs.min.js b/tooltip.cjs.min.js index 394a271..eb764d0 100644 --- a/tooltip.cjs.min.js +++ b/tooltip.cjs.min.js @@ -1,9 +1,10 @@ /** @draggable/tooltip - https://github.com/Draggable/tooltip -Version: 1.0.1 +Version: 1.1.0 Author: Draggable https://draggable.io */ -"use strict";var t=Object.defineProperty,i=(i,e,o)=>((i,e,o)=>e in i?t(i,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):i[e]=o)(i,"symbol"!=typeof e?e+"":e,o);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e="MYkh1v7x",o={"tooltip-trigger":e,tooltipTrigger:e,tooltip:"_3x4ZIcu-",visible:"JIt36hCJ"},s={triggerName:"tooltip"};class l{constructor(t=s){i(this,"options"),i(this,"tooltip"),i(this,"activeTriggerType",null),this.options=t,this.tooltip=document.createElement("div"),this.tooltip.className=o.tooltip,document.body.appendChild(this.tooltip),this.setupEventListeners()}setupEventListeners(){const t=`data-${this.options.triggerName}`;document.addEventListener("mouseover",(i=>{const e=i.target.closest(`[${t}]`);if("click"!==this.activeTriggerType&&"click"!==(null==e?void 0:e.getAttribute(`${t}-type`))){const i=null==e?void 0:e.getAttribute(`${t}`);i&&(this.show(e,i),this.activeTriggerType="hover")}})),document.addEventListener("mouseout",(i=>{const e=i.target.closest(`[${t}]`);"click"!==this.activeTriggerType&&"click"!==(null==e?void 0:e.getAttribute(`${t}-type`))&&this.hide()})),document.addEventListener("click",(i=>{const e=i.target.closest(`[${t}][${t}-type="click"]`);if(e)if(this.isVisible())this.hide();else{const i=e.getAttribute(`${t}`);this.show(e,i),this.activeTriggerType="click"}else this.hide()}))}isVisible(){return this.tooltip.classList.contains(o.visible)}calculatePosition(t){const i=t.getBoundingClientRect(),e=this.tooltip.getBoundingClientRect(),o=[{name:"top",x:i.left+(i.width-e.width)/2,y:i.top-e.height-12},{name:"bottom",x:i.left+(i.width-e.width)/2,y:i.bottom+12},{name:"right",x:i.right+12,y:i.top+(i.height-e.height)/2},{name:"left",x:i.left-e.width-12,y:i.top+(i.height-e.height)/2}];for(const s of o)if(this.fitsInViewport(s.x,s.y,e.width,e.height))return s;return o[0]}fitsInViewport(t,i,e,o){return t>=0&&i>=0&&t+e<=window.innerWidth&&i+o<=window.innerHeight}show(t,i){this.tooltip.innerHTML=i??"",this.tooltip.classList.add(o.visible);const e=this.calculatePosition(t);this.tooltip.style.left=`${e.x}px`,this.tooltip.style.top=`${e.y}px`,this.tooltip.dataset.position=e.name}hide(){this.tooltip.classList.remove(o.visible),this.activeTriggerType=null}}exports.SmartTooltip=l,exports.default=l; +!function(){"use strict";try{if("undefined"!=typeof document){var t=document.createElement("style");t.appendChild(document.createTextNode('._3x4ZIcu-{position:absolute;background:#1f2937;color:#fff;padding:.75rem;border-radius:.375rem;max-width:200px;z-index:50;visibility:hidden;opacity:0;transition:opacity .2s}._3x4ZIcu-.JIt36hCJ{visibility:visible;opacity:1}._3x4ZIcu-:before{content:"";position:absolute;width:0;height:0;border:6px solid transparent}._3x4ZIcu-[data-position=top]:before{border-top-color:#1f2937;bottom:-12px;left:50%;transform:translate(-50%)}._3x4ZIcu-[data-position=bottom]:before{border-bottom-color:#1f2937;top:-12px;left:50%;transform:translate(-50%)}._3x4ZIcu-[data-position=left]:before{border-left-color:#1f2937;right:-12px;top:50%;transform:translateY(-50%)}._3x4ZIcu-[data-position=right]:before{border-right-color:#1f2937;left:-12px;top:50%;transform:translateY(-50%)}')),document.head.appendChild(t)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}}(); +"use strict";var t=Object.defineProperty,e=(e,i,s)=>((e,i,s)=>i in e?t(e,i,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[i]=s)(e,"symbol"!=typeof i?i+"":i,s);Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i="_3x4ZIcu-",s="JIt36hCJ",o={triggerName:"tooltip"};class n{constructor(t=o){e(this,"triggerName"),e(this,"tooltip"),e(this,"activeTriggerType",null),e(this,"spacing",12),e(this,"handleClick",(t=>{const e=this.triggerName,i=t.target.closest(`[${e}][${e}-type="click"]`);if(i)if(this.isVisible())this.hide();else{const t=i.getAttribute(`${e}`);this.show(i,t),this.activeTriggerType="click"}else this.hide()})),e(this,"handleMouseOver",(t=>{const e=this.triggerName,i=t.target.closest(`[${e}]`);if("click"!==this.activeTriggerType&&"click"!==(null==i?void 0:i.getAttribute(`${e}-type`))){const t=null==i?void 0:i.getAttribute(`${e}`);t&&(this.show(i,t),this.activeTriggerType="hover")}})),e(this,"handleMouseOut",(t=>{const e=this.triggerName,i=t.target.closest(`[${e}]`);"click"!==this.activeTriggerType&&"click"!==(null==i?void 0:i.getAttribute(`${e}-type`))&&this.hide()})),e(this,"handleResize",(()=>{this.isVisible()&&this.hide()})),e(this,"handleScroll",(()=>{this.isVisible()&&this.hide()})),this.triggerName=`data-${t.triggerName}`,this.tooltip=document.createElement("div"),this.tooltip.className=i,document.body.appendChild(this.tooltip),this.setupEventListeners()}setupEventListeners(){document.addEventListener("mouseover",this.handleMouseOver),document.addEventListener("mouseout",this.handleMouseOut),document.addEventListener("click",this.handleClick),window.addEventListener("resize",this.handleResize),window.addEventListener("scroll",this.handleScroll,!0)}isVisible(){return this.tooltip.classList.contains(s)}calculatePosition(t){const e=t.getBoundingClientRect(),i=this.tooltip.getBoundingClientRect(),s=[{name:"top",x:e.left+(e.width-i.width)/2,y:e.top-i.height-this.spacing},{name:"bottom",x:e.left+(e.width-i.width)/2,y:e.bottom+this.spacing},{name:"left",x:e.left-i.width-this.spacing,y:e.top+(e.height-i.height)/2},{name:"right",x:e.right+this.spacing,y:e.top+(e.height-i.height)/2}];return s.find((t=>this.fitsInViewport(t,i)))||s[0]}fitsInViewport(t,e){return t.x>=0&&t.y>=0&&t.x+e.width<=window.innerWidth&&t.y+e.height<=window.innerHeight}show(t,e){this.tooltip.innerHTML=e??"",this.tooltip.classList.add(s);const i=this.calculatePosition(t);this.tooltip.style.left=`${i.x}px`,this.tooltip.style.top=`${i.y}px`,this.tooltip.dataset.position=i.name}hide(){this.tooltip.classList.remove(s),this.activeTriggerType=null}destroy(){document.removeEventListener("mouseover",this.handleMouseOver),document.removeEventListener("mouseout",this.handleMouseOut),document.removeEventListener("click",this.handleClick),window.removeEventListener("resize",this.handleResize),window.removeEventListener("scroll",this.handleScroll,!0),this.tooltip.remove()}}void 0!==window&&(window.SmartTooltip=n),exports.SmartTooltip=n,exports.default=n; diff --git a/tooltip.cjs.min.js.gz b/tooltip.cjs.min.js.gz index 3522b76..16d9af1 100644 Binary files a/tooltip.cjs.min.js.gz and b/tooltip.cjs.min.js.gz differ diff --git a/tooltip.css b/tooltip.css deleted file mode 100644 index b07ee28..0000000 --- a/tooltip.css +++ /dev/null @@ -1,9 +0,0 @@ - -/** -@draggable/tooltip - https://github.com/Draggable/tooltip -Version: 1.0.1 -Author: Draggable https://draggable.io -*/ - - -.MYkh1v7x{padding:.5rem 1rem;background:#4f46e5;color:#fff;border:none;border-radius:.25rem;cursor:pointer}._3x4ZIcu-{position:absolute;background:#1f2937;color:#fff;padding:.75rem;border-radius:.375rem;max-width:200px;z-index:50;visibility:hidden;opacity:0;transition:opacity .2s}._3x4ZIcu-.JIt36hCJ{visibility:visible;opacity:1}._3x4ZIcu-:before{content:"";position:absolute;width:0;height:0;border:6px solid transparent}._3x4ZIcu-[data-position=top]:before{border-top-color:#1f2937;bottom:-12px;left:50%;transform:translate(-50%)}._3x4ZIcu-[data-position=bottom]:before{border-bottom-color:#1f2937;top:-12px;left:50%;transform:translate(-50%)}._3x4ZIcu-[data-position=left]:before{border-left-color:#1f2937;right:-12px;top:50%;transform:translateY(-50%)}._3x4ZIcu-[data-position=right]:before{border-right-color:#1f2937;left:-12px;top:50%;transform:translateY(-50%)} diff --git a/tooltip.es.min.js b/tooltip.es.min.js index 3ee1b1f..a411d1f 100644 --- a/tooltip.es.min.js +++ b/tooltip.es.min.js @@ -1,36 +1,47 @@ /** @draggable/tooltip - https://github.com/Draggable/tooltip -Version: 1.0.1 +Version: 1.1.0 Author: Draggable https://draggable.io */ +!function(){"use strict";try{if("undefined"!=typeof document){var t=document.createElement("style");t.appendChild(document.createTextNode('._3x4ZIcu-{position:absolute;background:#1f2937;color:#fff;padding:.75rem;border-radius:.375rem;max-width:200px;z-index:50;visibility:hidden;opacity:0;transition:opacity .2s}._3x4ZIcu-.JIt36hCJ{visibility:visible;opacity:1}._3x4ZIcu-:before{content:"";position:absolute;width:0;height:0;border:6px solid transparent}._3x4ZIcu-[data-position=top]:before{border-top-color:#1f2937;bottom:-12px;left:50%;transform:translate(-50%)}._3x4ZIcu-[data-position=bottom]:before{border-bottom-color:#1f2937;top:-12px;left:50%;transform:translate(-50%)}._3x4ZIcu-[data-position=left]:before{border-left-color:#1f2937;right:-12px;top:50%;transform:translateY(-50%)}._3x4ZIcu-[data-position=right]:before{border-right-color:#1f2937;left:-12px;top:50%;transform:translateY(-50%)}')),document.head.appendChild(t)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}}(); var __defProp = Object.defineProperty; var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value); -const tooltipTrigger = `MYkh1v7x`; -const tooltip = `_3x4ZIcu-`; -const visible = `JIt36hCJ`; -const styles = { "tooltip-trigger": tooltipTrigger, tooltipTrigger, tooltip, visible }; -console.log(styles); +const tooltip = "_3x4ZIcu-"; +const visible = "JIt36hCJ"; +const styles = { + tooltip, + visible +}; const defaultOptions = { triggerName: "tooltip" }; class SmartTooltip { constructor(options = defaultOptions) { - __publicField(this, "options"); + __publicField(this, "triggerName"); __publicField(this, "tooltip"); __publicField(this, "activeTriggerType", null); - this.options = options; - this.tooltip = document.createElement("div"); - this.tooltip.className = styles.tooltip; - document.body.appendChild(this.tooltip); - this.setupEventListeners(); - } - setupEventListeners() { - const triggerName = `data-${this.options.triggerName}`; - document.addEventListener("mouseover", (e) => { + __publicField(this, "spacing", 12); + __publicField(this, "handleClick", (e) => { + const triggerName = this.triggerName; + const trigger = e.target.closest(`[${triggerName}][${triggerName}-type="click"]`); + if (trigger) { + if (this.isVisible()) { + this.hide(); + } else { + const content = trigger.getAttribute(`${triggerName}`); + this.show(trigger, content); + this.activeTriggerType = "click"; + } + } else { + this.hide(); + } + }); + __publicField(this, "handleMouseOver", (e) => { + const triggerName = this.triggerName; const trigger = e.target.closest(`[${triggerName}]`); if (this.activeTriggerType !== "click" && (trigger == null ? void 0 : trigger.getAttribute(`${triggerName}-type`)) !== "click") { const content = trigger == null ? void 0 : trigger.getAttribute(`${triggerName}`); @@ -40,26 +51,35 @@ class SmartTooltip { } } }); - document.addEventListener("mouseout", (e) => { + __publicField(this, "handleMouseOut", (e) => { + const triggerName = this.triggerName; const trigger = e.target.closest(`[${triggerName}]`); if (this.activeTriggerType !== "click" && (trigger == null ? void 0 : trigger.getAttribute(`${triggerName}-type`)) !== "click") { this.hide(); } }); - document.addEventListener("click", (e) => { - const trigger = e.target.closest(`[${triggerName}][${triggerName}-type="click"]`); - if (trigger) { - if (this.isVisible()) { - this.hide(); - } else { - const content = trigger.getAttribute(`${triggerName}`); - this.show(trigger, content); - this.activeTriggerType = "click"; - } - } else { + __publicField(this, "handleResize", () => { + if (this.isVisible()) { + this.hide(); + } + }); + __publicField(this, "handleScroll", () => { + if (this.isVisible()) { this.hide(); } }); + this.triggerName = `data-${options.triggerName}`; + this.tooltip = document.createElement("div"); + this.tooltip.className = styles.tooltip; + document.body.appendChild(this.tooltip); + this.setupEventListeners(); + } + setupEventListeners() { + document.addEventListener("mouseover", this.handleMouseOver); + document.addEventListener("mouseout", this.handleMouseOut); + document.addEventListener("click", this.handleClick); + window.addEventListener("resize", this.handleResize); + window.addEventListener("scroll", this.handleScroll, true); } isVisible() { return this.tooltip.classList.contains(styles.visible); @@ -67,38 +87,32 @@ class SmartTooltip { calculatePosition(trigger) { const triggerRect = trigger.getBoundingClientRect(); const tooltipRect = this.tooltip.getBoundingClientRect(); - const spacing = 12; const positions = [ { name: "top", x: triggerRect.left + (triggerRect.width - tooltipRect.width) / 2, - y: triggerRect.top - tooltipRect.height - spacing + y: triggerRect.top - tooltipRect.height - this.spacing }, { name: "bottom", x: triggerRect.left + (triggerRect.width - tooltipRect.width) / 2, - y: triggerRect.bottom + spacing + y: triggerRect.bottom + this.spacing }, { - name: "right", - x: triggerRect.right + spacing, + name: "left", + x: triggerRect.left - tooltipRect.width - this.spacing, y: triggerRect.top + (triggerRect.height - tooltipRect.height) / 2 }, { - name: "left", - x: triggerRect.left - tooltipRect.width - spacing, + name: "right", + x: triggerRect.right + this.spacing, y: triggerRect.top + (triggerRect.height - tooltipRect.height) / 2 } ]; - for (const pos of positions) { - if (this.fitsInViewport(pos.x, pos.y, tooltipRect.width, tooltipRect.height)) { - return pos; - } - } - return positions[0]; + return positions.find((pos) => this.fitsInViewport(pos, tooltipRect)) || positions[0]; } - fitsInViewport(x, y, width, height) { - return x >= 0 && y >= 0 && x + width <= window.innerWidth && y + height <= window.innerHeight; + fitsInViewport(pos, tooltipRect) { + return pos.x >= 0 && pos.y >= 0 && pos.x + tooltipRect.width <= window.innerWidth && pos.y + tooltipRect.height <= window.innerHeight; } show(trigger, content) { this.tooltip.innerHTML = content ?? ""; @@ -112,6 +126,17 @@ class SmartTooltip { this.tooltip.classList.remove(styles.visible); this.activeTriggerType = null; } + destroy() { + document.removeEventListener("mouseover", this.handleMouseOver); + document.removeEventListener("mouseout", this.handleMouseOut); + document.removeEventListener("click", this.handleClick); + window.removeEventListener("resize", this.handleResize); + window.removeEventListener("scroll", this.handleScroll, true); + this.tooltip.remove(); + } +} +if (window !== void 0) { + window.SmartTooltip = SmartTooltip; } export { SmartTooltip, diff --git a/tooltip.es.min.js.gz b/tooltip.es.min.js.gz index a2f5f21..bfce340 100644 Binary files a/tooltip.es.min.js.gz and b/tooltip.es.min.js.gz differ diff --git a/tooltip.iife.min.js b/tooltip.iife.min.js index d9ee06e..b1ff603 100644 --- a/tooltip.iife.min.js +++ b/tooltip.iife.min.js @@ -1,9 +1,10 @@ /** @draggable/tooltip - https://github.com/Draggable/tooltip -Version: 1.0.1 +Version: 1.1.0 Author: Draggable https://draggable.io */ -var tooltip=function(t){"use strict";var i=Object.defineProperty,e=(t,e,o)=>((t,e,o)=>e in t?i(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o)(t,"symbol"!=typeof e?e+"":e,o);const o="MYkh1v7x",s={"tooltip-trigger":o,tooltipTrigger:o,tooltip:"_3x4ZIcu-",visible:"JIt36hCJ"},l={triggerName:"tooltip"};class n{constructor(t=l){e(this,"options"),e(this,"tooltip"),e(this,"activeTriggerType",null),this.options=t,this.tooltip=document.createElement("div"),this.tooltip.className=s.tooltip,document.body.appendChild(this.tooltip),this.setupEventListeners()}setupEventListeners(){const t=`data-${this.options.triggerName}`;document.addEventListener("mouseover",(i=>{const e=i.target.closest(`[${t}]`);if("click"!==this.activeTriggerType&&"click"!==(null==e?void 0:e.getAttribute(`${t}-type`))){const i=null==e?void 0:e.getAttribute(`${t}`);i&&(this.show(e,i),this.activeTriggerType="hover")}})),document.addEventListener("mouseout",(i=>{const e=i.target.closest(`[${t}]`);"click"!==this.activeTriggerType&&"click"!==(null==e?void 0:e.getAttribute(`${t}-type`))&&this.hide()})),document.addEventListener("click",(i=>{const e=i.target.closest(`[${t}][${t}-type="click"]`);if(e)if(this.isVisible())this.hide();else{const i=e.getAttribute(`${t}`);this.show(e,i),this.activeTriggerType="click"}else this.hide()}))}isVisible(){return this.tooltip.classList.contains(s.visible)}calculatePosition(t){const i=t.getBoundingClientRect(),e=this.tooltip.getBoundingClientRect(),o=[{name:"top",x:i.left+(i.width-e.width)/2,y:i.top-e.height-12},{name:"bottom",x:i.left+(i.width-e.width)/2,y:i.bottom+12},{name:"right",x:i.right+12,y:i.top+(i.height-e.height)/2},{name:"left",x:i.left-e.width-12,y:i.top+(i.height-e.height)/2}];for(const s of o)if(this.fitsInViewport(s.x,s.y,e.width,e.height))return s;return o[0]}fitsInViewport(t,i,e,o){return t>=0&&i>=0&&t+e<=window.innerWidth&&i+o<=window.innerHeight}show(t,i){this.tooltip.innerHTML=i??"",this.tooltip.classList.add(s.visible);const e=this.calculatePosition(t);this.tooltip.style.left=`${e.x}px`,this.tooltip.style.top=`${e.y}px`,this.tooltip.dataset.position=e.name}hide(){this.tooltip.classList.remove(s.visible),this.activeTriggerType=null}}return t.SmartTooltip=n,t.default=n,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),t}({}); +!function(){"use strict";try{if("undefined"!=typeof document){var t=document.createElement("style");t.appendChild(document.createTextNode('._3x4ZIcu-{position:absolute;background:#1f2937;color:#fff;padding:.75rem;border-radius:.375rem;max-width:200px;z-index:50;visibility:hidden;opacity:0;transition:opacity .2s}._3x4ZIcu-.JIt36hCJ{visibility:visible;opacity:1}._3x4ZIcu-:before{content:"";position:absolute;width:0;height:0;border:6px solid transparent}._3x4ZIcu-[data-position=top]:before{border-top-color:#1f2937;bottom:-12px;left:50%;transform:translate(-50%)}._3x4ZIcu-[data-position=bottom]:before{border-bottom-color:#1f2937;top:-12px;left:50%;transform:translate(-50%)}._3x4ZIcu-[data-position=left]:before{border-left-color:#1f2937;right:-12px;top:50%;transform:translateY(-50%)}._3x4ZIcu-[data-position=right]:before{border-right-color:#1f2937;left:-12px;top:50%;transform:translateY(-50%)}')),document.head.appendChild(t)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}}(); +var tooltip=function(t){"use strict";var e=Object.defineProperty,i=(t,i,s)=>((t,i,s)=>i in t?e(t,i,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[i]=s)(t,"symbol"!=typeof i?i+"":i,s);const s="_3x4ZIcu-",o="JIt36hCJ",n={triggerName:"tooltip"};class h{constructor(t=n){i(this,"triggerName"),i(this,"tooltip"),i(this,"activeTriggerType",null),i(this,"spacing",12),i(this,"handleClick",(t=>{const e=this.triggerName,i=t.target.closest(`[${e}][${e}-type="click"]`);if(i)if(this.isVisible())this.hide();else{const t=i.getAttribute(`${e}`);this.show(i,t),this.activeTriggerType="click"}else this.hide()})),i(this,"handleMouseOver",(t=>{const e=this.triggerName,i=t.target.closest(`[${e}]`);if("click"!==this.activeTriggerType&&"click"!==(null==i?void 0:i.getAttribute(`${e}-type`))){const t=null==i?void 0:i.getAttribute(`${e}`);t&&(this.show(i,t),this.activeTriggerType="hover")}})),i(this,"handleMouseOut",(t=>{const e=this.triggerName,i=t.target.closest(`[${e}]`);"click"!==this.activeTriggerType&&"click"!==(null==i?void 0:i.getAttribute(`${e}-type`))&&this.hide()})),i(this,"handleResize",(()=>{this.isVisible()&&this.hide()})),i(this,"handleScroll",(()=>{this.isVisible()&&this.hide()})),this.triggerName=`data-${t.triggerName}`,this.tooltip=document.createElement("div"),this.tooltip.className=s,document.body.appendChild(this.tooltip),this.setupEventListeners()}setupEventListeners(){document.addEventListener("mouseover",this.handleMouseOver),document.addEventListener("mouseout",this.handleMouseOut),document.addEventListener("click",this.handleClick),window.addEventListener("resize",this.handleResize),window.addEventListener("scroll",this.handleScroll,!0)}isVisible(){return this.tooltip.classList.contains(o)}calculatePosition(t){const e=t.getBoundingClientRect(),i=this.tooltip.getBoundingClientRect(),s=[{name:"top",x:e.left+(e.width-i.width)/2,y:e.top-i.height-this.spacing},{name:"bottom",x:e.left+(e.width-i.width)/2,y:e.bottom+this.spacing},{name:"left",x:e.left-i.width-this.spacing,y:e.top+(e.height-i.height)/2},{name:"right",x:e.right+this.spacing,y:e.top+(e.height-i.height)/2}];return s.find((t=>this.fitsInViewport(t,i)))||s[0]}fitsInViewport(t,e){return t.x>=0&&t.y>=0&&t.x+e.width<=window.innerWidth&&t.y+e.height<=window.innerHeight}show(t,e){this.tooltip.innerHTML=e??"",this.tooltip.classList.add(o);const i=this.calculatePosition(t);this.tooltip.style.left=`${i.x}px`,this.tooltip.style.top=`${i.y}px`,this.tooltip.dataset.position=i.name}hide(){this.tooltip.classList.remove(o),this.activeTriggerType=null}destroy(){document.removeEventListener("mouseover",this.handleMouseOver),document.removeEventListener("mouseout",this.handleMouseOut),document.removeEventListener("click",this.handleClick),window.removeEventListener("resize",this.handleResize),window.removeEventListener("scroll",this.handleScroll,!0),this.tooltip.remove()}}return void 0!==window&&(window.SmartTooltip=h),t.SmartTooltip=h,t.default=h,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),t}({}); diff --git a/tooltip.iife.min.js.gz b/tooltip.iife.min.js.gz index 424e14c..f815b58 100644 Binary files a/tooltip.iife.min.js.gz and b/tooltip.iife.min.js.gz differ diff --git a/tooltip.umd.min.js b/tooltip.umd.min.js index 8e70ec8..b75bffe 100644 --- a/tooltip.umd.min.js +++ b/tooltip.umd.min.js @@ -1,9 +1,10 @@ /** @draggable/tooltip - https://github.com/Draggable/tooltip -Version: 1.0.1 +Version: 1.1.0 Author: Draggable https://draggable.io */ -!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).tooltip={})}(this,(function(t){"use strict";var e=Object.defineProperty,i=(t,i,o)=>((t,i,o)=>i in t?e(t,i,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[i]=o)(t,"symbol"!=typeof i?i+"":i,o);const o="MYkh1v7x",s={"tooltip-trigger":o,tooltipTrigger:o,tooltip:"_3x4ZIcu-",visible:"JIt36hCJ"},n={triggerName:"tooltip"};class l{constructor(t=n){i(this,"options"),i(this,"tooltip"),i(this,"activeTriggerType",null),this.options=t,this.tooltip=document.createElement("div"),this.tooltip.className=s.tooltip,document.body.appendChild(this.tooltip),this.setupEventListeners()}setupEventListeners(){const t=`data-${this.options.triggerName}`;document.addEventListener("mouseover",(e=>{const i=e.target.closest(`[${t}]`);if("click"!==this.activeTriggerType&&"click"!==(null==i?void 0:i.getAttribute(`${t}-type`))){const e=null==i?void 0:i.getAttribute(`${t}`);e&&(this.show(i,e),this.activeTriggerType="hover")}})),document.addEventListener("mouseout",(e=>{const i=e.target.closest(`[${t}]`);"click"!==this.activeTriggerType&&"click"!==(null==i?void 0:i.getAttribute(`${t}-type`))&&this.hide()})),document.addEventListener("click",(e=>{const i=e.target.closest(`[${t}][${t}-type="click"]`);if(i)if(this.isVisible())this.hide();else{const e=i.getAttribute(`${t}`);this.show(i,e),this.activeTriggerType="click"}else this.hide()}))}isVisible(){return this.tooltip.classList.contains(s.visible)}calculatePosition(t){const e=t.getBoundingClientRect(),i=this.tooltip.getBoundingClientRect(),o=[{name:"top",x:e.left+(e.width-i.width)/2,y:e.top-i.height-12},{name:"bottom",x:e.left+(e.width-i.width)/2,y:e.bottom+12},{name:"right",x:e.right+12,y:e.top+(e.height-i.height)/2},{name:"left",x:e.left-i.width-12,y:e.top+(e.height-i.height)/2}];for(const s of o)if(this.fitsInViewport(s.x,s.y,i.width,i.height))return s;return o[0]}fitsInViewport(t,e,i,o){return t>=0&&e>=0&&t+i<=window.innerWidth&&e+o<=window.innerHeight}show(t,e){this.tooltip.innerHTML=e??"",this.tooltip.classList.add(s.visible);const i=this.calculatePosition(t);this.tooltip.style.left=`${i.x}px`,this.tooltip.style.top=`${i.y}px`,this.tooltip.dataset.position=i.name}hide(){this.tooltip.classList.remove(s.visible),this.activeTriggerType=null}}t.SmartTooltip=l,t.default=l,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})})); +!function(){"use strict";try{if("undefined"!=typeof document){var t=document.createElement("style");t.appendChild(document.createTextNode('._3x4ZIcu-{position:absolute;background:#1f2937;color:#fff;padding:.75rem;border-radius:.375rem;max-width:200px;z-index:50;visibility:hidden;opacity:0;transition:opacity .2s}._3x4ZIcu-.JIt36hCJ{visibility:visible;opacity:1}._3x4ZIcu-:before{content:"";position:absolute;width:0;height:0;border:6px solid transparent}._3x4ZIcu-[data-position=top]:before{border-top-color:#1f2937;bottom:-12px;left:50%;transform:translate(-50%)}._3x4ZIcu-[data-position=bottom]:before{border-bottom-color:#1f2937;top:-12px;left:50%;transform:translate(-50%)}._3x4ZIcu-[data-position=left]:before{border-left-color:#1f2937;right:-12px;top:50%;transform:translateY(-50%)}._3x4ZIcu-[data-position=right]:before{border-right-color:#1f2937;left:-12px;top:50%;transform:translateY(-50%)}')),document.head.appendChild(t)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}}(); +!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).tooltip={})}(this,(function(t){"use strict";var e=Object.defineProperty,i=(t,i,s)=>((t,i,s)=>i in t?e(t,i,{enumerable:!0,configurable:!0,writable:!0,value:s}):t[i]=s)(t,"symbol"!=typeof i?i+"":i,s);const s="_3x4ZIcu-",o="JIt36hCJ",n={triggerName:"tooltip"};class h{constructor(t=n){i(this,"triggerName"),i(this,"tooltip"),i(this,"activeTriggerType",null),i(this,"spacing",12),i(this,"handleClick",(t=>{const e=this.triggerName,i=t.target.closest(`[${e}][${e}-type="click"]`);if(i)if(this.isVisible())this.hide();else{const t=i.getAttribute(`${e}`);this.show(i,t),this.activeTriggerType="click"}else this.hide()})),i(this,"handleMouseOver",(t=>{const e=this.triggerName,i=t.target.closest(`[${e}]`);if("click"!==this.activeTriggerType&&"click"!==(null==i?void 0:i.getAttribute(`${e}-type`))){const t=null==i?void 0:i.getAttribute(`${e}`);t&&(this.show(i,t),this.activeTriggerType="hover")}})),i(this,"handleMouseOut",(t=>{const e=this.triggerName,i=t.target.closest(`[${e}]`);"click"!==this.activeTriggerType&&"click"!==(null==i?void 0:i.getAttribute(`${e}-type`))&&this.hide()})),i(this,"handleResize",(()=>{this.isVisible()&&this.hide()})),i(this,"handleScroll",(()=>{this.isVisible()&&this.hide()})),this.triggerName=`data-${t.triggerName}`,this.tooltip=document.createElement("div"),this.tooltip.className=s,document.body.appendChild(this.tooltip),this.setupEventListeners()}setupEventListeners(){document.addEventListener("mouseover",this.handleMouseOver),document.addEventListener("mouseout",this.handleMouseOut),document.addEventListener("click",this.handleClick),window.addEventListener("resize",this.handleResize),window.addEventListener("scroll",this.handleScroll,!0)}isVisible(){return this.tooltip.classList.contains(o)}calculatePosition(t){const e=t.getBoundingClientRect(),i=this.tooltip.getBoundingClientRect(),s=[{name:"top",x:e.left+(e.width-i.width)/2,y:e.top-i.height-this.spacing},{name:"bottom",x:e.left+(e.width-i.width)/2,y:e.bottom+this.spacing},{name:"left",x:e.left-i.width-this.spacing,y:e.top+(e.height-i.height)/2},{name:"right",x:e.right+this.spacing,y:e.top+(e.height-i.height)/2}];return s.find((t=>this.fitsInViewport(t,i)))||s[0]}fitsInViewport(t,e){return t.x>=0&&t.y>=0&&t.x+e.width<=window.innerWidth&&t.y+e.height<=window.innerHeight}show(t,e){this.tooltip.innerHTML=e??"",this.tooltip.classList.add(o);const i=this.calculatePosition(t);this.tooltip.style.left=`${i.x}px`,this.tooltip.style.top=`${i.y}px`,this.tooltip.dataset.position=i.name}hide(){this.tooltip.classList.remove(o),this.activeTriggerType=null}destroy(){document.removeEventListener("mouseover",this.handleMouseOver),document.removeEventListener("mouseout",this.handleMouseOut),document.removeEventListener("click",this.handleClick),window.removeEventListener("resize",this.handleResize),window.removeEventListener("scroll",this.handleScroll,!0),this.tooltip.remove()}}void 0!==window&&(window.SmartTooltip=h),t.SmartTooltip=h,t.default=h,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})})); diff --git a/tooltip.umd.min.js.gz b/tooltip.umd.min.js.gz index da96e62..6468200 100644 Binary files a/tooltip.umd.min.js.gz and b/tooltip.umd.min.js.gz differ