@whitesev/pops 1.8.5 → 1.8.7

package/dist/index.amd.js

@@ -212,6 +212,9 @@ define((function () { 'use strict';
                 return this.contains(PopsCore.document.body || PopsCore.document.documentElement, arguments[0]);
             }
             else {
+                if (target == null) {
+                    return false;
+                }
                 if (typeof target[Symbol.iterator] === "function") {
                     // 可遍历的数组
                     let flag = true;
@@ -4099,289 +4102,6 @@ define((function () { 'use strict';
         }
     }
 
-    const PopsTooltipConfig = () => {
-        return {
-            // @ts-ignore
-            target: null,
-            content: "默认文字",
-            position: "top",
-            className: "",
-            alwaysShow: false,
-            triggerShowEventName: "mouseenter touchstart",
-            triggerCloseEventName: "mouseleave touchend",
-            zIndex: 10000,
-            only: false,
-            eventOption: {
-                passive: false,
-                capture: true,
-                once: false,
-            },
-            showBeforeCallBack() { },
-            showAfterCallBack() { },
-            closeBeforeCallBack() { },
-            closeAfterCallBack() { },
-            arrowDistance: 12.5,
-            otherDistance: 0,
-            style: "",
-            beforeAppendToPageCallBack() { },
-        };
-    };
-
-    class PopsTooltip {
-        constructor(details) {
-            const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
-            PopsHandler.handleInit($shadowRoot, [
-                pops.config.cssText.index,
-                pops.config.cssText.anim,
-                pops.config.cssText.common,
-                pops.config.cssText.tooltipCSS,
-            ]);
-            let config = PopsTooltipConfig();
-            config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
-            config = popsUtils.assign(config, details);
-            if (!(config.target instanceof HTMLElement)) {
-                throw "config.target 必须是HTMLElement类型";
-            }
-            let guid = popsUtils.getRandomGUID();
-            const PopsType = "tooltip";
-            config = PopsHandler.handleOnly(PopsType, config);
-            function getContent() {
-                return typeof config.content === "function"
-                    ? config.content()
-                    : config.content;
-            }
-            /**
-             * 获取悬浮提示的元素信息
-             */
-            function getToolTipElementInfo() {
-                let _toolTipHTML_ = `<div class="pops-tip"></div>`;
-                let _toolTipElement_ = popsUtils.parseTextToDOM(_toolTipHTML_);
-                if (typeof config.className === "string" &&
-                    config.className.trim() !== "") {
-                    popsDOMUtils.addClassName(_toolTipElement_, config.className);
-                }
-                _toolTipElement_.setAttribute("data-guid", guid);
-                _toolTipElement_.style.zIndex = PopsHandler.handleZIndex(config.zIndex).toString();
-                _toolTipElement_.innerHTML = `<div style="text-align: center;">${getContent()}</div>`;
-                /* 箭头元素 */
-                let _toolTipArrowHTML_ = '<div class="pops-tip-arrow"></div>';
-                let _toolTipArrowNode_ = popsUtils.parseTextToDOM(_toolTipArrowHTML_);
-                _toolTipElement_.appendChild(_toolTipArrowNode_);
-                if (config.style != null) {
-                    /* 添加自定义style */
-                    let cssNode = document.createElement("style");
-                    cssNode.setAttribute("type", "text/css");
-                    cssNode.innerHTML = config.style;
-                    _toolTipElement_.appendChild(cssNode);
-                }
-                return {
-                    toolTipElement: _toolTipElement_,
-                    toolTipArrowElement: _toolTipArrowNode_,
-                    toolTipHTML: _toolTipHTML_,
-                    toolTipArrowHTML: _toolTipArrowHTML_,
-                };
-            }
-            config.position =
-                config.position.toLowerCase();
-            let { toolTipElement } = getToolTipElementInfo();
-            /**
-             * 设置 提示框的位置
-             */
-            function setToolTipPosition(positionDetails) {
-                let positionDetail = positionDetails[config.position.toUpperCase()];
-                if (positionDetail) {
-                    toolTipElement.style.left = positionDetail.left + "px";
-                    toolTipElement.style.top = positionDetail.top + "px";
-                    toolTipElement.setAttribute("data-motion", positionDetail.motion);
-                    toolTipElement
-                        .querySelector(".pops-tip-arrow")
-                        ?.setAttribute("data-position", positionDetail.arrow);
-                }
-                else {
-                    console.error("不存在该位置", config.position);
-                }
-            }
-            /**
-             * 获取 提示框的位置
-             * @param targetElement 目标元素
-             * @param arrowDistance 箭头和目标元素的距离
-             * @param otherDistance 其它位置的偏移
-             */
-            function getToolTipPosition(targetElement, arrowDistance, otherDistance) {
-                let targetElement_width = popsDOMUtils.offset(targetElement).width;
-                let targetElement_height = popsDOMUtils.offset(targetElement).height;
-                let targetElement_top = popsDOMUtils.offset(targetElement).top;
-                // let targetElement_bottom = popsDOMUtils.offset(targetElement).bottom;
-                let targetElement_left = popsDOMUtils.offset(targetElement).left;
-                // let targetElement_right = popsDOMUtils.offset(targetElement).right;
-                let toolTipElement_width = popsDOMUtils.outerWidth(toolTipElement);
-                let toolTipElement_height = popsDOMUtils.outerHeight(toolTipElement);
-                /* 目标元素的x轴的中间位置 */
-                let targetElement_X_center_pos = targetElement_left + targetElement_width / 2 - toolTipElement_width / 2;
-                /* 目标元素的Y轴的中间位置 */
-                let targetElement_Y_center_pos = targetElement_top +
-                    targetElement_height / 2 -
-                    toolTipElement_height / 2;
-                return {
-                    TOP: {
-                        left: targetElement_X_center_pos - otherDistance,
-                        top: targetElement_top - toolTipElement_height - arrowDistance,
-                        arrow: "bottom",
-                        motion: "fadeInTop",
-                    },
-                    RIGHT: {
-                        left: targetElement_left + targetElement_width + arrowDistance,
-                        top: targetElement_Y_center_pos + otherDistance,
-                        arrow: "left",
-                        motion: "fadeInRight",
-                    },
-                    BOTTOM: {
-                        left: targetElement_X_center_pos - otherDistance,
-                        top: targetElement_top + targetElement_height + arrowDistance,
-                        arrow: "top",
-                        motion: "fadeInBottom",
-                    },
-                    LEFT: {
-                        left: targetElement_left - toolTipElement_width - arrowDistance,
-                        top: targetElement_Y_center_pos + otherDistance,
-                        arrow: "right",
-                        motion: "fadeInLeft",
-                    },
-                };
-            }
-            /**
-             * 显示提示框
-             */
-            function showToolTipNode() {
-                if (typeof config.showBeforeCallBack === "function") {
-                    let result = config.showBeforeCallBack();
-                    if (typeof result === "boolean" && !result) {
-                        return;
-                    }
-                }
-                if (!popsUtils.contains($shadowRoot, toolTipElement)) {
-                    popsDOMUtils.append($shadowRoot, toolTipElement);
-                }
-                if (!popsUtils.contains($shadowContainer)) {
-                    if (typeof config.beforeAppendToPageCallBack === "function") {
-                        config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
-                    }
-                    popsDOMUtils.append(document.body, $shadowContainer);
-                }
-                setToolTipPosition(getToolTipPosition(config.target, config.arrowDistance, config.otherDistance));
-                if (typeof config.showAfterCallBack === "function") {
-                    config.showAfterCallBack(toolTipElement);
-                }
-            }
-            /**
-             * 关闭提示框
-             */
-            function closeToolTipNode() {
-                if (typeof config.closeBeforeCallBack === "function") {
-                    let result = config.closeBeforeCallBack(toolTipElement);
-                    if (typeof result === "boolean" && !result) {
-                        return;
-                    }
-                }
-                toolTipElement.setAttribute("data-motion", toolTipElement.getAttribute("data-motion").replace("fadeIn", "fadeOut"));
-                if (typeof config.closeAfterCallBack === "function") {
-                    config.closeAfterCallBack(toolTipElement);
-                }
-            }
-            /**
-             * 绑定 显示事件
-             */
-            function onShowEvent() {
-                popsDOMUtils.on(config.target, config.triggerShowEventName, showToolTipNode, config.eventOption);
-            }
-            /**
-             * 绑定 关闭事件
-             */
-            function onCloseEvent() {
-                popsDOMUtils.on(config.target, config.triggerCloseEventName, closeToolTipNode, config.eventOption);
-            }
-            /**
-             * 取消绑定 显示事件
-             */
-            function offShowEvent() {
-                popsDOMUtils.off(config.target, config.triggerShowEventName, showToolTipNode, {
-                    capture: true,
-                });
-            }
-            /**
-             * 取消绑定 关闭事件
-             */
-            function offCloseEvent() {
-                popsDOMUtils.off(config.target, config.triggerCloseEventName, closeToolTipNode, {
-                    capture: true,
-                });
-            }
-            /**
-             * 即使存在动画属性，但是当前设置的动画Out结束后移除元素
-             */
-            function endEvent() {
-                if (toolTipElement.getAttribute("data-motion").includes("In")) {
-                    return;
-                }
-                toolTipElement.remove();
-            }
-            if (config.alwaysShow) {
-                /* 总是显示 */
-                showToolTipNode();
-                return {
-                    guid: guid,
-                    config: config,
-                    toolTipNode: toolTipElement,
-                    show: showToolTipNode,
-                    close() {
-                        popsDOMUtils.on(toolTipElement, popsDOMUtils.getAnimationEndNameList(), endEvent, config.eventOption);
-                        closeToolTipNode();
-                    },
-                    off: null,
-                    on: null,
-                };
-            }
-            else {
-                /* 事件触发才显示 */
-                /**
-                 * 当鼠标|手触摸，暂停当前动画
-                 */
-                popsDOMUtils.on(toolTipElement, "mouseenter touchstart", () => {
-                    toolTipElement.style.animationPlayState = "paused";
-                    // if (parseInt(getComputedStyle(toolTipElement)) > 0.5) {
-                    // toolTipElement.style.animationPlayState = "paused";
-                    // }
-                }, config.eventOption);
-                /**
-                 * 当鼠标|手离开，开始当前动画
-                 */
-                popsDOMUtils.on(toolTipElement, "mouseleave touchend", () => {
-                    toolTipElement.style.animationPlayState = "running";
-                }, config.eventOption);
-                popsDOMUtils.on(toolTipElement, popsDOMUtils.getAnimationEndNameList(), endEvent, config.eventOption);
-                onShowEvent();
-                onCloseEvent();
-                return {
-                    guid: guid,
-                    $shadowContainer: $shadowContainer,
-                    $shadowRoot: $shadowRoot,
-                    config: config,
-                    toolTipNode: toolTipElement,
-                    show: showToolTipNode,
-                    close: closeToolTipNode,
-                    off() {
-                        offShowEvent();
-                        offCloseEvent();
-                    },
-                    on() {
-                        onShowEvent();
-                        onCloseEvent();
-                    },
-                };
-            }
-        }
-    }
-
     const PopsDrawerConfig = () => {
         return {
             title: {
@@ -6364,21 +6084,20 @@ define((function () { 'use strict';
                 };
                 let tooltip = pops.tooltip({
                     target: rangeInputElement.parentElement,
-                    content: getToolTipContent(rangeInputElement.value),
-                    zIndex: 1000000,
-                    className: "github-tooltip",
-                    showBeforeCallBack() {
-                        tooltip.toolTipNode.querySelector("div").innerText =
-                            getToolTipContent(rangeInputElement.value);
+                    content: () => {
+                        return getToolTipContent(rangeInputElement.value);
                     },
+                    zIndex: () => {
+                        return PopsInstanceUtils.getPopsMaxZIndex().zIndex;
+                    },
+                    className: "github-tooltip",
                     alwaysShow: false,
                     only: false,
                     position: "top",
                     arrowDistance: 10,
                 });
                 popsDOMUtils.on(rangeInputElement, ["input", "propertychange"], void 0, function (event) {
-                    tooltip.toolTipNode.querySelector("div").innerText =
-                        getToolTipContent(rangeInputElement.value);
+                    tooltip.toolTip.changeContent(getToolTipContent(rangeInputElement.value));
                     if (typeof formConfig.callback === "function") {
                         formConfig.callback(event, event.target.value);
                     }
@@ -6474,6 +6193,7 @@ define((function () { 'use strict';
                          * 10 => 160px~200px
                          */
                         stepBlockMap: new Map(),
+                        tooltip: null,
                     },
                     $ele: {
                         slider: liElement.querySelector(".pops-slider"),
@@ -6481,7 +6201,6 @@ define((function () { 'use strict';
                         bar: liElement.querySelector(".pops-slider__bar"),
                         buttonWrapper: liElement.querySelector(".pops-slider__button-wrapper"),
                         button: liElement.querySelector(".pops-slider__button"),
-                        tooltip: null,
                     },
                     $interval: {
                         isCheck: false,
@@ -6861,13 +6580,13 @@ define((function () { 'use strict';
                      * 显示悬浮的
                      */
                     showToolTip() {
-                        this.$ele.tooltip.show();
+                        this.$data.tooltip.toolTip.show();
                     },
                     /**
                      * 关闭悬浮的
                      */
                     closeToolTip() {
-                        this.$ele.tooltip.close();
+                        this.$data.tooltip.toolTip.close();
                     },
                     /**
                      * 检测在1000ms内，是否停止了拖拽
@@ -6904,11 +6623,12 @@ define((function () { 'use strict';
                                 return PopsPanelSlider.value;
                             }
                         }
-                        let tooltipContent = null;
-                        this.$ele.tooltip = pops.tooltip({
+                        let tooltip = pops.tooltip({
                             target: this.$ele.button,
                             content: getToolTipContent,
-                            zIndex: 1000000,
+                            zIndex: () => {
+                                return PopsInstanceUtils.getPopsMaxZIndex().zIndex;
+                            },
                             className: "github-tooltip",
                             only: false,
                             eventOption: {
@@ -6919,7 +6639,7 @@ define((function () { 'use strict';
                                 this.intervalInit();
                             },
                             showAfterCallBack: (toolTipNode) => {
-                                tooltipContent.innerText = getToolTipContent();
+                                tooltip.toolTip.changeContent(getToolTipContent());
                             },
                             closeBeforeCallBack: () => {
                                 if (this.$data.isMove) {
@@ -6932,8 +6652,7 @@ define((function () { 'use strict';
                             position: "top",
                             arrowDistance: 10,
                         });
-                        tooltipContent =
-                            this.$ele.tooltip.toolTipNode.querySelector("div");
+                        this.$data.tooltip = tooltip;
                     },
                 };
                 PopsPanelSlider.init();
@@ -9702,11 +9421,460 @@ define((function () { 'use strict';
         }
     }
 
+    const PopsTooltipConfig = () => {
+        return {
+            // @ts-ignore
+            target: null,
+            content: "默认文字",
+            position: "top",
+            className: "",
+            alwaysShow: false,
+            triggerShowEventName: "mouseenter touchstart",
+            triggerCloseEventName: "mouseleave touchend",
+            zIndex: 10000,
+            only: false,
+            eventOption: {
+                passive: false,
+                capture: true,
+                once: false,
+            },
+            showBeforeCallBack() { },
+            showAfterCallBack() { },
+            closeBeforeCallBack() { },
+            closeAfterCallBack() { },
+            arrowDistance: 12.5,
+            otherDistance: 0,
+            style: "",
+            beforeAppendToPageCallBack() { },
+        };
+    };
+
+    class ToolTip {
+        $el = {
+            $shadowContainer: null,
+            $shadowRoot: null,
+            $toolTip: null,
+            $content: null,
+            $arrow: null,
+        };
+        $data = {
+            config: null,
+            guid: null,
+            timeId_show: [],
+            timeId_close: [],
+        };
+        constructor(config, guid, ShadowInfo) {
+            this.$data.config = config;
+            this.$data.guid = guid;
+            this.$el.$shadowContainer = ShadowInfo.$shadowContainer;
+            this.$el.$shadowRoot = ShadowInfo.$shadowRoot;
+            this.init();
+        }
+        init() {
+            let toolTipInfo = this.createToolTip();
+            this.$el.$toolTip = toolTipInfo.$toolTipContainer;
+            this.$el.$content = toolTipInfo.$toolTipContent;
+            this.$el.$arrow = toolTipInfo.$toolTipArrow;
+            this.changeContent();
+            this.changeZIndex();
+            this.changePosition();
+            if (!this.$data.config.alwaysShow) {
+                this.offEvent();
+                this.onEvent();
+            }
+        }
+        /**
+         * 创建提示元素
+         */
+        createToolTip() {
+            let $toolTipContainer = popsDOMUtils.createElement("div", {
+                className: "pops-tip",
+                innerHTML: /*html*/ `
+				<div class="pops-tip-content" style="text-align: center;"></div>
+				<div class="pops-tip-arrow"></div>
+			`,
+            });
+            /** 内容 */
+            let $toolTipContent = $toolTipContainer.querySelector(".pops-tip-content");
+            /** 箭头 */
+            let $toolTipArrow = $toolTipContainer.querySelector(".pops-tip-arrow");
+            // 处理className
+            if (typeof this.$data.config.className === "string" &&
+                this.$data.config.className.trim() !== "") {
+                popsDOMUtils.addClassName($toolTipContainer, this.$data.config.className);
+            }
+            // 添加attr
+            $toolTipContainer.setAttribute("data-guid", this.$data.guid);
+            // 添加z-index
+            $toolTipContainer.style.zIndex = PopsHandler.handleZIndex(this.$data.config.zIndex).toString();
+            if (this.$data.config.style != null) {
+                /* 添加自定义style */
+                let cssNode = popsDOMUtils.createElement("style", {
+                    type: "text/css",
+                    innerHTML: this.$data.config.style,
+                });
+                $toolTipContainer.appendChild(cssNode);
+            }
+            return {
+                $toolTipContainer: $toolTipContainer,
+                $toolTipArrow: $toolTipArrow,
+                $toolTipContent: $toolTipContent,
+            };
+        }
+        /**
+         * 获取提示的内容
+         */
+        getContent() {
+            return typeof this.$data.config.content === "function"
+                ? this.$data.config.content()
+                : this.$data.config.content;
+        }
+        /**
+         * 修改提示的内容
+         * @param text
+         */
+        changeContent(text) {
+            if (text == null) {
+                text = this.getContent();
+            }
+            this.$el.$content.innerHTML = text;
+        }
+        /**
+         * 获取z-index
+         */
+        getZIndex() {
+            const zIndex = PopsHandler.handleZIndex(this.$data.config.zIndex);
+            return zIndex;
+        }
+        /**
+         * 动态修改z-index
+         */
+        changeZIndex() {
+            const zIndex = this.getZIndex();
+            this.$el.$toolTip.style.setProperty("z-index", zIndex.toString());
+        }
+        /**
+         * 获取 提示框的位置
+         * @param targetElement 目标元素
+         * @param arrowDistance 箭头和目标元素的距离
+         * @param otherDistance 其它位置的偏移
+         */
+        getPosition(targetElement, arrowDistance, otherDistance) {
+            let targetElement_width = popsDOMUtils.offset(targetElement).width;
+            let targetElement_height = popsDOMUtils.offset(targetElement).height;
+            let targetElement_top = popsDOMUtils.offset(targetElement).top;
+            // let targetElement_bottom = popsDOMUtils.offset(targetElement).bottom;
+            let targetElement_left = popsDOMUtils.offset(targetElement).left;
+            // let targetElement_right = popsDOMUtils.offset(targetElement).right;
+            let toolTipElement_width = popsDOMUtils.outerWidth(this.$el.$toolTip);
+            let toolTipElement_height = popsDOMUtils.outerHeight(this.$el.$toolTip);
+            /* 目标元素的x轴的中间位置 */
+            let targetElement_X_center_pos = targetElement_left + targetElement_width / 2 - toolTipElement_width / 2;
+            /* 目标元素的Y轴的中间位置 */
+            let targetElement_Y_center_pos = targetElement_top + targetElement_height / 2 - toolTipElement_height / 2;
+            return {
+                TOP: {
+                    left: targetElement_X_center_pos - otherDistance,
+                    top: targetElement_top - toolTipElement_height - arrowDistance,
+                    arrow: "bottom",
+                    motion: "fadeInTop",
+                },
+                RIGHT: {
+                    left: targetElement_left + targetElement_width + arrowDistance,
+                    top: targetElement_Y_center_pos + otherDistance,
+                    arrow: "left",
+                    motion: "fadeInRight",
+                },
+                BOTTOM: {
+                    left: targetElement_X_center_pos - otherDistance,
+                    top: targetElement_top + targetElement_height + arrowDistance,
+                    arrow: "top",
+                    motion: "fadeInBottom",
+                },
+                LEFT: {
+                    left: targetElement_left - toolTipElement_width - arrowDistance,
+                    top: targetElement_Y_center_pos + otherDistance,
+                    arrow: "right",
+                    motion: "fadeInLeft",
+                },
+            };
+        }
+        /**
+         * 动态修改tooltip的位置
+         */
+        changePosition() {
+            let positionInfo = this.getPosition(this.$data.config.target, this.$data.config.arrowDistance, this.$data.config.otherDistance);
+            let positionKey = this.$data.config.position.toUpperCase();
+            let positionDetail = positionInfo[positionKey];
+            if (positionDetail) {
+                this.$el.$toolTip.style.left = positionDetail.left + "px";
+                this.$el.$toolTip.style.top = positionDetail.top + "px";
+                this.$el.$toolTip.setAttribute("data-motion", positionDetail.motion);
+                this.$el.$arrow.setAttribute("data-position", positionDetail.arrow);
+            }
+            else {
+                console.error("不存在该位置", this.$data.config.position);
+            }
+        }
+        /**
+         * 事件绑定
+         */
+        onEvent() {
+            // 监听动画结束事件
+            this.onAnimationFinishEvent();
+            this.onShowEvent();
+            this.onCloseEvent();
+            this.onMouseEnterEvent();
+            this.onMouseLeaveEvent();
+        }
+        /**
+         * 取消事件绑定
+         */
+        offEvent() {
+            this.offAnimationFinishEvent();
+            this.offShowEvent();
+            this.offCloseEvent();
+            this.offMouseEnterEvent();
+            this.offMouseLeaveEvent();
+        }
+        /**
+         * 清除延迟的timeId
+         */
+        clearCloseTimeoutId(timeId) {
+            for (let index = 0; index < this.$data.timeId_close.length; index++) {
+                const currentTimeId = this.$data.timeId_close[index];
+                if (typeof timeId === "number") {
+                    // 只清除一个
+                    if (timeId == currentTimeId) {
+                        clearTimeout(timeId);
+                        this.$data.timeId_close.splice(index, 1);
+                        break;
+                    }
+                }
+                else {
+                    clearTimeout(currentTimeId);
+                    this.$data.timeId_close.splice(index, 1);
+                    index--;
+                }
+            }
+        }
+        /**
+         * 显示提示框
+         */
+        show() {
+            if (typeof this.$data.config.showBeforeCallBack === "function") {
+                let result = this.$data.config.showBeforeCallBack(this.$el.$toolTip);
+                if (typeof result === "boolean" && !result) {
+                    return;
+                }
+            }
+            this.clearCloseTimeoutId();
+            if (!popsUtils.contains(this.$el.$shadowRoot, this.$el.$toolTip)) {
+                // 不在容器中，添加
+                this.init();
+                popsDOMUtils.append(this.$el.$shadowRoot, this.$el.$toolTip);
+            }
+            if (!popsUtils.contains(this.$el.$shadowContainer)) {
+                // 页面不存在Shadow，添加
+                if (typeof this.$data.config.beforeAppendToPageCallBack === "function") {
+                    this.$data.config.beforeAppendToPageCallBack(this.$el.$shadowRoot, this.$el.$shadowContainer);
+                }
+                popsDOMUtils.append(document.body, this.$el.$shadowContainer);
+            }
+            // 更新内容
+            this.changeContent();
+            // 更新tip的位置
+            this.changePosition();
+            if (typeof this.$data.config.showAfterCallBack === "function") {
+                this.$data.config.showAfterCallBack(this.$el.$toolTip);
+            }
+        }
+        /**
+         * 绑定 显示事件
+         */
+        onShowEvent() {
+            popsDOMUtils.on(this.$data.config.target, this.$data.config.triggerShowEventName, this.show.bind(this), this.$data.config.eventOption);
+        }
+        /**
+         * 取消绑定 显示事件
+         */
+        offShowEvent() {
+            popsDOMUtils.off(this.$data.config.target, this.$data.config.triggerShowEventName, this.show.bind(this), {
+                capture: true,
+            });
+        }
+        /**
+         * 关闭提示框
+         */
+        close(...args) {
+            let event = args[0];
+            // 只判断鼠标事件
+            // 其它的如Touch事件不做处理
+            if (event && event instanceof MouseEvent) {
+                let $target = event.composedPath()[0];
+                // 如果是子元素触发的话，忽视
+                if ($target != this.$data.config.target) {
+                    return;
+                }
+            }
+            if (typeof this.$data.config.closeBeforeCallBack === "function") {
+                let result = this.$data.config.closeBeforeCallBack(this.$el.$toolTip);
+                if (typeof result === "boolean" && !result) {
+                    return;
+                }
+            }
+            if (this.$data.config.delayCloseTime == null ||
+                (typeof this.$data.config.delayCloseTime === "number" &&
+                    this.$data.config.delayCloseTime <= 0)) {
+                this.$data.config.delayCloseTime = 100;
+            }
+            let timeId = setTimeout(() => {
+                // 设置属性触发关闭动画
+                this.clearCloseTimeoutId(timeId);
+                this.$el.$toolTip.setAttribute("data-motion", this.$el.$toolTip
+                    .getAttribute("data-motion")
+                    .replace("fadeIn", "fadeOut"));
+            }, this.$data.config.delayCloseTime);
+            this.$data.timeId_close.push(timeId);
+            if (typeof this.$data.config.closeAfterCallBack === "function") {
+                this.$data.config.closeAfterCallBack(this.$el.$toolTip);
+            }
+        }
+        /**
+         * 绑定 关闭事件
+         */
+        onCloseEvent() {
+            popsDOMUtils.on(this.$data.config.target, this.$data.config.triggerCloseEventName, this.close.bind(this), this.$data.config.eventOption);
+        }
+        /**
+         * 取消绑定 关闭事件
+         */
+        offCloseEvent() {
+            popsDOMUtils.off(this.$data.config.target, this.$data.config.triggerCloseEventName, this.close.bind(this), {
+                capture: true,
+            });
+        }
+        /**
+         * 销毁元素
+         */
+        destory() {
+            if (this.$el.$toolTip) {
+                this.$el.$shadowRoot.removeChild(this.$el.$toolTip);
+            }
+            // @ts-ignore
+            this.$el.$toolTip = null;
+            // @ts-ignore
+            this.$el.$arrow = null;
+            // @ts-ignore
+            this.$el.$content = null;
+        }
+        /**
+         * 动画结束事件
+         */
+        animationFinishEvent() {
+            if (!this.$el.$toolTip) {
+                return;
+            }
+            if (this.$el.$toolTip.getAttribute("data-motion").includes("In")) {
+                return;
+            }
+            this.destory();
+        }
+        /**
+         * 监听动画结束
+         */
+        onAnimationFinishEvent() {
+            popsDOMUtils.on(this.$el.$toolTip, popsDOMUtils.getAnimationEndNameList(), this.animationFinishEvent.bind(this));
+        }
+        /**
+         * 取消监听动画结束
+         */
+        offAnimationFinishEvent() {
+            popsDOMUtils.off(this.$el.$toolTip, popsDOMUtils.getAnimationEndNameList(), this.animationFinishEvent.bind(this));
+        }
+        /**
+         * 鼠标|触摸进入事件
+         */
+        mouseEnterEvent() {
+            this.$el.$toolTip.style.animationPlayState = "paused";
+            // if (parseInt(getComputedStyle(toolTipElement)) > 0.5) {
+            // toolTipElement.style.animationPlayState = "paused";
+            // }
+        }
+        /**
+         * 监听鼠标|触摸事件
+         */
+        onMouseEnterEvent() {
+            this.clearCloseTimeoutId();
+            popsDOMUtils.on(this.$el.$toolTip, "mouseenter touchstart", this.mouseEnterEvent.bind(this), this.$data.config.eventOption);
+        }
+        /**
+         * 取消监听鼠标|触摸事件
+         */
+        offMouseEnterEvent() {
+            popsDOMUtils.off(this.$el.$toolTip, "mouseenter touchstart", this.mouseEnterEvent.bind(this), this.$data.config.eventOption);
+        }
+        /**
+         * 鼠标|触摸离开事件
+         */
+        mouseLeaveEvent() {
+            this.$el.$toolTip.style.animationPlayState = "running";
+        }
+        /**
+         * 监听鼠标|触摸离开事件
+         */
+        onMouseLeaveEvent() {
+            popsDOMUtils.on(this.$el.$toolTip, "mouseleave touchend", this.mouseLeaveEvent.bind(this), this.$data.config.eventOption);
+        }
+        /**
+         * 取消监听鼠标|触摸离开事件
+         */
+        offMouseLeaveEvent() {
+            popsDOMUtils.off(this.$el.$toolTip, "mouseleave touchend", this.mouseLeaveEvent.bind(this), this.$data.config.eventOption);
+        }
+    }
+    class PopsTooltip {
+        constructor(details) {
+            const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow();
+            PopsHandler.handleInit($shadowRoot, [
+                pops.config.cssText.index,
+                pops.config.cssText.anim,
+                pops.config.cssText.common,
+                pops.config.cssText.tooltipCSS,
+            ]);
+            let config = PopsTooltipConfig();
+            config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
+            config = popsUtils.assign(config, details);
+            if (!(config.target instanceof HTMLElement)) {
+                throw "config.target 必须是HTMLElement类型";
+            }
+            let guid = popsUtils.getRandomGUID();
+            const PopsType = "tooltip";
+            config = PopsHandler.handleOnly(PopsType, config);
+            let toolTip = new ToolTip(config, guid, {
+                $shadowContainer,
+                $shadowRoot,
+            });
+            if (config.alwaysShow) {
+                /* 总是显示 */
+                /* 直接显示 */
+                toolTip.show();
+            }
+            return {
+                guid: guid,
+                config: config,
+                $shadowContainer: $shadowContainer,
+                $shadowRoot: $shadowRoot,
+                toolTip: toolTip,
+            };
+        }
+    }
+
     class Pops {
         /** 配置 */
         config = {
             /** 版本号 */
-            version: "2024.11.2",
+            version: "2024.11.3",
             cssText: {
                 /** 主CSS */
                 index: indexCSS,
@@ -9806,7 +9974,6 @@ define((function () { 'use strict';
             /** pops.panel中用于处理各个类型的工具 */
             panelHandleContentUtils: PanelHandleContentDetails,
         };
-        constructor() { }
         init() {
             if (!this.config.isInit) {
                 /* 处理获取当前所有的动画名 */
@@ -9888,7 +10055,8 @@ define((function () { 'use strict';
          * @param details 配置
          */
         tooltip = (details) => {
-            return new PopsTooltip(details);
+            let popsTooltip = new PopsTooltip(details);
+            return popsTooltip;
         };
         /**
          * 抽屉