@whitesev/pops 1.8.7 → 1.8.9

package/dist/index.umd.js

@@ -967,13 +967,17 @@
         }
         /**
          * 实现jQuery中的$().offset();
-         * @param {HTMLElement} element
-         * @returns
+         * @param element
+         * @param calcScroll 计算滚动距离
          */
-        offset(element) {
+        offset(element, calcScroll = true) {
             let rect = element.getBoundingClientRect();
             let win = element.ownerDocument.defaultView;
-            let resultRect = new DOMRect(parseFloat((rect.left + (win?.pageXOffset || 0)).toString()), parseFloat((rect.top + (win?.pageYOffset || 0)).toString()), rect.width, rect.height);
+            let resultRect = new DOMRect(calcScroll
+                ? parseFloat((rect.left + (win?.pageXOffset || 0)).toString())
+                : rect.left, calcScroll
+                ? parseFloat((rect.top + (win?.pageYOffset || 0)).toString())
+                : rect.top, rect.width, rect.height);
             return resultRect;
         }
         width(element, isShow = false, parent) {
@@ -2284,7 +2288,7 @@
 
     var iframeCSS = ".pops[type-value=\"iframe\"] {\r\n\t--container-title-height: 55px;\r\n\ttransition: width 0.35s ease, height 0.35s ease;\r\n}\r\n.pops[type-value] .pops-iframe-title {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: space-between;\r\n}\r\n.pops[type-value=\"iframe\"] .pops-iframe-title {\r\n\twidth: calc(100% - 0px);\r\n\theight: var(--container-title-height);\r\n\tborder-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n}\r\n.pops[type-value=\"iframe\"] .pops-iframe-title p[pops] {\r\n\twidth: 100%;\r\n\toverflow: hidden;\r\n\tcolor: rgb(51, 51, 51);\r\n\ttext-indent: 15px;\r\n\ttext-overflow: ellipsis;\r\n\twhite-space: nowrap;\r\n\tfont-weight: 500;\r\n\tline-height: normal;\r\n\talign-content: center;\r\n}\r\n.pops[type-value=\"iframe\"] .pops-iframe-content {\r\n\twidth: 100%;\r\n\t/*height: calc(100% - var(--container-title-height));*/\r\n\tflex: 1;\r\n\toverflow: hidden;\r\n\tword-break: break-word;\r\n}\r\n.pops[type-value=\"iframe\"] .pops-iframe-content p[pops] {\r\n\tpadding: 5px 10px;\r\n\tcolor: #333;\r\n\ttext-indent: 15px;\r\n}\r\n.pops-loading {\r\n\tposition: absolute;\r\n\ttop: 40px;\r\n\tright: 0;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n\tz-index: 5;\r\n\tbackground-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n}\r\n.pops-loading:before {\r\n\tposition: absolute;\r\n\ttop: 50%;\r\n\tleft: 50%;\r\n\tz-index: 3;\r\n\tdisplay: block;\r\n\tmargin: -20px 0 0 -20px;\r\n\tpadding: 20px;\r\n\tborder: 4px solid rgb(221, 221, 221, var(--pops-bd-opacity));\r\n\tborder-radius: 50%;\r\n\tcontent: \"\";\r\n\tborder-top-color: transparent;\r\n\tanimation: pops-anim-wait-rotate 1.2s linear infinite;\r\n}\r\n.pops[type-value=\"iframe\"].pops[type-module=\"min\"] {\r\n\tbottom: 0;\r\n\tmax-width: 200px;\r\n\tmax-height: 53px;\r\n\tposition: unset;\r\n}\r\n.pops[type-value=\"iframe\"].pops[type-module=\"min\"]\r\n\t.pops-header-control[type=\"min\"] {\r\n\tdisplay: none;\r\n}\r\n.pops[type-value=\"iframe\"].pops-iframe-unset-top {\r\n\ttop: unset !important;\r\n}\r\n.pops[type-value=\"iframe\"].pops-iframe-unset-left {\r\n\tleft: unset !important;\r\n}\r\n.pops[type-value=\"iframe\"].pops-iframe-unset-transform {\r\n\ttransform: none !important;\r\n}\r\n.pops[type-value=\"iframe\"].pops-iframe-unset-transition {\r\n\ttransition: none !important;\r\n}\r\n.pops[type-value=\"iframe\"].pops[type-module=\"max\"] {\r\n\twidth: 100% !important;\r\n\theight: 100% !important;\r\n}\r\n.pops[type-value=\"iframe\"] iframe[pops] {\r\n\twidth: calc(100% - 4px);\r\n\theight: calc(100% - 4px);\r\n\tborder: 0;\r\n}\r\n.pops-iframe-content-global-loading {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 0;\r\n\tz-index: 999999;\r\n\twidth: 0;\r\n\theight: 4px;\r\n\tbackground: linear-gradient(to right, #4995dd, #fff, rgb(202 224 246));\r\n\tanimation: iframeLoadingChange 2s forwards;\r\n}\r\n\r\n.pops-anim:has(.pops[type-value=\"iframe\"].pops[type-module=\"min\"]) {\r\n\tposition: unset;\r\n}\r\n";
 
-    var tooltipCSS = ".pops-tip {\r\n\t--tooltip-color: #4e4e4e;\r\n\t--tooltip-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\t--tooltip-bd-radius: 2px;\r\n\t--tooltip-font-size: 14px;\r\n\t--tooltip-padding-top: 13px;\r\n\t--tooltip-padding-right: 13px;\r\n\t--tooltip-padding-bottom: 13px;\r\n\t--tooltip-padding-left: 13px;\r\n\r\n\t--tooltip-arrow--after-color: rgb(78, 78, 78);\r\n\t--tooltip-arrow--after-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\t--tooltip-arrow--after-width: 12px;\r\n\t--tooltip-arrow--after-height: 12px;\r\n\r\n\tposition: absolute;\r\n\tpadding: var(--tooltip-padding-top) var(--tooltip-padding-right)\r\n\t\tvar(--tooltip-padding-bottom) var(--tooltip-padding-left);\r\n\tmax-width: 400px;\r\n\tmax-height: 300px;\r\n\tborder-radius: var(--tooltip-bd-radius);\r\n\tbackground-color: var(--tooltip-bg-color);\r\n\tbox-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);\r\n\tcolor: var(--tooltip-color);\r\n\tfont-size: var(--tooltip-font-size);\r\n}\r\n/* github的样式 */\r\n.pops-tip.github-tooltip {\r\n\t--tooltip-bg-opacity: 1;\r\n\t--tooltip-color: rgb(255, 255, 255);\r\n\t--tooltip-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));\r\n\t--tooltip-bd-radius: 6px;\r\n\t--tooltip-padding-top: 6px;\r\n\t--tooltip-padding-right: 8px;\r\n\t--tooltip-padding-bottom: 6px;\r\n\t--tooltip-padding-left: 8px;\r\n\r\n\t--tooltip-arrow--after-color: rgb(255, 255, 255);\r\n\t--tooltip-arrow--after-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));\r\n\t--tooltip-arrow--after-width: 8px;\r\n\t--tooltip-arrow--after-height: 8px;\r\n}\r\n.pops-tip .pops-tip-arrow {\r\n\tposition: absolute;\r\n\ttop: 100%;\r\n\tleft: 50%;\r\n\toverflow: hidden;\r\n\twidth: 100%;\r\n\theight: 12.5px;\r\n\ttransform: translateX(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow::after {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 50%;\r\n\twidth: var(--tooltip-arrow--after-width);\r\n\theight: var(--tooltip-arrow--after-height);\r\n\tbackground: var(--tooltip-arrow--after-bg-color);\r\n\tcolor: var(--tooltip-arrow--after-color);\r\n\tbox-shadow: 0 1px 7px rgba(0, 0, 0, 0.24), 0 1px 7px rgba(0, 0, 0, 0.12);\r\n\tcontent: \"\";\r\n\ttransform: translateX(-50%) translateY(-50%) rotate(45deg);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"bottom\"] {\r\n\tposition: absolute;\r\n\ttop: 100%;\r\n\tleft: 50%;\r\n\toverflow: hidden;\r\n\twidth: 100%;\r\n\theight: 12.5px;\r\n\ttransform: translateX(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"bottom\"]:after {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 50%;\r\n\twidth: var(--tooltip-arrow--after-width);\r\n\theight: var(--tooltip-arrow--after-height);\r\n\tbackground: var(--tooltip-arrow--after-bg-color);\r\n\tbox-shadow: 0 1px 7px rgba(0, 0, 0, 0.24), 0 1px 7px rgba(0, 0, 0, 0.12);\r\n\tcontent: \"\";\r\n\ttransform: translateX(-50%) translateY(-50%) rotate(45deg);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"left\"] {\r\n\ttop: 50%;\r\n\tleft: -12.5px;\r\n\twidth: 12.5px;\r\n\theight: 50px;\r\n\ttransform: translateY(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"left\"]:after {\r\n\tposition: absolute;\r\n\ttop: 50%;\r\n\tleft: 100%;\r\n\tcontent: \"\";\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"right\"] {\r\n\ttop: 50%;\r\n\tright: -12.5px;\r\n\tleft: auto;\r\n\twidth: 12.5px;\r\n\theight: 50px;\r\n\ttransform: translateY(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"right\"]:after {\r\n\tposition: absolute;\r\n\ttop: 50%;\r\n\tleft: 0;\r\n\tcontent: \"\";\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"top\"] {\r\n\ttop: -12.5px;\r\n\tleft: 50%;\r\n\ttransform: translateX(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"top\"]:after {\r\n\tposition: absolute;\r\n\ttop: 100%;\r\n\tleft: 50%;\r\n\tcontent: \"\";\r\n}\r\n\r\n.pops-tip[data-motion] {\r\n\t-webkit-animation-duration: 0.25s;\r\n\tanimation-duration: 0.25s;\r\n\t-webkit-animation-fill-mode: forwards;\r\n\tanimation-fill-mode: forwards;\r\n}\r\n.pops-tip[data-motion=\"fadeOutRight\"] {\r\n\t-webkit-animation-name: pops-motion-fadeOutRight;\r\n\tanimation-name: pops-motion-fadeOutRight;\r\n}\r\n.pops-tip[data-motion=\"fadeInTop\"] {\r\n\t-webkit-animation-name: pops-motion-fadeInTop;\r\n\tanimation-name: pops-motion-fadeInTop;\r\n\tanimation-timing-function: cubic-bezier(0.49, 0.49, 0.13, 1.3);\r\n}\r\n.pops-tip[data-motion=\"fadeOutTop\"] {\r\n\t-webkit-animation-name: pops-motion-fadeOutTop;\r\n\tanimation-name: pops-motion-fadeOutTop;\r\n\tanimation-timing-function: cubic-bezier(0.32, 0.37, 0.06, 0.87);\r\n}\r\n.pops-tip[data-motion=\"fadeInBottom\"] {\r\n\t-webkit-animation-name: pops-motion-fadeInBottom;\r\n\tanimation-name: pops-motion-fadeInBottom;\r\n}\r\n.pops-tip[data-motion=\"fadeOutBottom\"] {\r\n\t-webkit-animation-name: pops-motion-fadeOutBottom;\r\n\tanimation-name: pops-motion-fadeOutBottom;\r\n}\r\n.pops-tip[data-motion=\"fadeInLeft\"] {\r\n\t-webkit-animation-name: pops-motion-fadeInLeft;\r\n\tanimation-name: pops-motion-fadeInLeft;\r\n}\r\n.pops-tip[data-motion=\"fadeOutLeft\"] {\r\n\t-webkit-animation-name: pops-motion-fadeOutLeft;\r\n\tanimation-name: pops-motion-fadeOutLeft;\r\n}\r\n.pops-tip[data-motion=\"fadeInRight\"] {\r\n\t-webkit-animation-name: pops-motion-fadeInRight;\r\n\tanimation-name: pops-motion-fadeInRight;\r\n}\r\n";
+    var tooltipCSS = ".pops-tip {\r\n\t--tooltip-color: #4e4e4e;\r\n\t--tooltip-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\t--tooltip-bd-radius: 2px;\r\n\t--tooltip-font-size: 14px;\r\n\t--tooltip-padding-top: 13px;\r\n\t--tooltip-padding-right: 13px;\r\n\t--tooltip-padding-bottom: 13px;\r\n\t--tooltip-padding-left: 13px;\r\n\r\n\t--tooltip-arrow--after-color: rgb(78, 78, 78);\r\n\t--tooltip-arrow--after-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n\t--tooltip-arrow--after-width: 12px;\r\n\t--tooltip-arrow--after-height: 12px;\r\n\r\n\tpadding: var(--tooltip-padding-top) var(--tooltip-padding-right)\r\n\t\tvar(--tooltip-padding-bottom) var(--tooltip-padding-left);\r\n\tmax-width: 400px;\r\n\tmax-height: 300px;\r\n\tborder-radius: var(--tooltip-bd-radius);\r\n\tbackground-color: var(--tooltip-bg-color);\r\n\tbox-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);\r\n\tcolor: var(--tooltip-color);\r\n\tfont-size: var(--tooltip-font-size);\r\n}\r\n.pops-tip[data-position=\"absolute\"] {\r\n\tposition: absolute;\r\n}\r\n.pops-tip[data-position=\"fixed\"] {\r\n\tposition: fixed;\r\n}\r\n/* github的样式 */\r\n.pops-tip.github-tooltip {\r\n\t--tooltip-bg-opacity: 1;\r\n\t--tooltip-color: rgb(255, 255, 255);\r\n\t--tooltip-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));\r\n\t--tooltip-bd-radius: 6px;\r\n\t--tooltip-padding-top: 6px;\r\n\t--tooltip-padding-right: 8px;\r\n\t--tooltip-padding-bottom: 6px;\r\n\t--tooltip-padding-left: 8px;\r\n\r\n\t--tooltip-arrow--after-color: rgb(255, 255, 255);\r\n\t--tooltip-arrow--after-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));\r\n\t--tooltip-arrow--after-width: 8px;\r\n\t--tooltip-arrow--after-height: 8px;\r\n}\r\n.pops-tip .pops-tip-arrow {\r\n\tposition: absolute;\r\n\ttop: 100%;\r\n\tleft: 50%;\r\n\toverflow: hidden;\r\n\twidth: 100%;\r\n\theight: 12.5px;\r\n\ttransform: translateX(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow::after {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 50%;\r\n\twidth: var(--tooltip-arrow--after-width);\r\n\theight: var(--tooltip-arrow--after-height);\r\n\tbackground: var(--tooltip-arrow--after-bg-color);\r\n\tcolor: var(--tooltip-arrow--after-color);\r\n\tbox-shadow: 0 1px 7px rgba(0, 0, 0, 0.24), 0 1px 7px rgba(0, 0, 0, 0.12);\r\n\tcontent: \"\";\r\n\ttransform: translateX(-50%) translateY(-50%) rotate(45deg);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"bottom\"] {\r\n\tposition: absolute;\r\n\ttop: 100%;\r\n\tleft: 50%;\r\n\toverflow: hidden;\r\n\twidth: 100%;\r\n\theight: 12.5px;\r\n\ttransform: translateX(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"bottom\"]:after {\r\n\tposition: absolute;\r\n\ttop: 0;\r\n\tleft: 50%;\r\n\twidth: var(--tooltip-arrow--after-width);\r\n\theight: var(--tooltip-arrow--after-height);\r\n\tbackground: var(--tooltip-arrow--after-bg-color);\r\n\tbox-shadow: 0 1px 7px rgba(0, 0, 0, 0.24), 0 1px 7px rgba(0, 0, 0, 0.12);\r\n\tcontent: \"\";\r\n\ttransform: translateX(-50%) translateY(-50%) rotate(45deg);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"left\"] {\r\n\ttop: 50%;\r\n\tleft: -12.5px;\r\n\twidth: 12.5px;\r\n\theight: 50px;\r\n\ttransform: translateY(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"left\"]:after {\r\n\tposition: absolute;\r\n\ttop: 50%;\r\n\tleft: 100%;\r\n\tcontent: \"\";\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"right\"] {\r\n\ttop: 50%;\r\n\tright: -12.5px;\r\n\tleft: auto;\r\n\twidth: 12.5px;\r\n\theight: 50px;\r\n\ttransform: translateY(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"right\"]:after {\r\n\tposition: absolute;\r\n\ttop: 50%;\r\n\tleft: 0;\r\n\tcontent: \"\";\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"top\"] {\r\n\ttop: -12.5px;\r\n\tleft: 50%;\r\n\ttransform: translateX(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position=\"top\"]:after {\r\n\tposition: absolute;\r\n\ttop: 100%;\r\n\tleft: 50%;\r\n\tcontent: \"\";\r\n}\r\n\r\n.pops-tip[data-motion] {\r\n\t-webkit-animation-duration: 0.25s;\r\n\tanimation-duration: 0.25s;\r\n\t-webkit-animation-fill-mode: forwards;\r\n\tanimation-fill-mode: forwards;\r\n}\r\n.pops-tip[data-motion=\"fadeOutRight\"] {\r\n\t-webkit-animation-name: pops-motion-fadeOutRight;\r\n\tanimation-name: pops-motion-fadeOutRight;\r\n}\r\n.pops-tip[data-motion=\"fadeInTop\"] {\r\n\t-webkit-animation-name: pops-motion-fadeInTop;\r\n\tanimation-name: pops-motion-fadeInTop;\r\n\tanimation-timing-function: cubic-bezier(0.49, 0.49, 0.13, 1.3);\r\n}\r\n.pops-tip[data-motion=\"fadeOutTop\"] {\r\n\t-webkit-animation-name: pops-motion-fadeOutTop;\r\n\tanimation-name: pops-motion-fadeOutTop;\r\n\tanimation-timing-function: cubic-bezier(0.32, 0.37, 0.06, 0.87);\r\n}\r\n.pops-tip[data-motion=\"fadeInBottom\"] {\r\n\t-webkit-animation-name: pops-motion-fadeInBottom;\r\n\tanimation-name: pops-motion-fadeInBottom;\r\n}\r\n.pops-tip[data-motion=\"fadeOutBottom\"] {\r\n\t-webkit-animation-name: pops-motion-fadeOutBottom;\r\n\tanimation-name: pops-motion-fadeOutBottom;\r\n}\r\n.pops-tip[data-motion=\"fadeInLeft\"] {\r\n\t-webkit-animation-name: pops-motion-fadeInLeft;\r\n\tanimation-name: pops-motion-fadeInLeft;\r\n}\r\n.pops-tip[data-motion=\"fadeOutLeft\"] {\r\n\t-webkit-animation-name: pops-motion-fadeOutLeft;\r\n\tanimation-name: pops-motion-fadeOutLeft;\r\n}\r\n.pops-tip[data-motion=\"fadeInRight\"] {\r\n\t-webkit-animation-name: pops-motion-fadeInRight;\r\n\tanimation-name: pops-motion-fadeInRight;\r\n}\r\n";
 
     var drawerCSS = ".pops[type-value=\"drawer\"] {\r\n\tposition: fixed;\r\n\tbox-sizing: border-box;\r\n\tdisplay: flex;\r\n\tflex-direction: column;\r\n\tbox-shadow: 0px 16px 48px 16px rgba(0, 0, 0, 0.08),\r\n\t\t0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16);\r\n\toverflow: hidden;\r\n\ttransition: all 0.3s;\r\n}\r\n.pops[type-value] .pops-drawer-title {\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: space-between;\r\n}\r\n.pops[type-value] .pops-drawer-title p[pops] {\r\n\tline-height: normal;\r\n\talign-content: center;\r\n}\r\n\r\n.pops-drawer-content {\r\n\tflex: 1;\r\n\toverflow: auto;\r\n}\r\n.pops[type-value=\"drawer\"] .pops-drawer-btn {\r\n\tpadding-top: 10px;\r\n\tpadding-bottom: 10px;\r\n}\r\n.pops[type-value=\"drawer\"][direction=\"top\"] {\r\n\twidth: 100%;\r\n\tleft: 0;\r\n\tright: 0;\r\n\ttop: 0;\r\n}\r\n.pops[type-value=\"drawer\"][direction=\"bottom\"] {\r\n\twidth: 100%;\r\n\tleft: 0;\r\n\tright: 0;\r\n\tbottom: 0;\r\n}\r\n.pops[type-value=\"drawer\"][direction=\"left\"] {\r\n\theight: 100%;\r\n\ttop: 0;\r\n\tbottom: 0;\r\n\tleft: 0;\r\n}\r\n.pops[type-value=\"drawer\"][direction=\"right\"] {\r\n\theight: 100%;\r\n\ttop: 0;\r\n\tbottom: 0;\r\n\tright: 0;\r\n}\r\n";
 
@@ -6633,6 +6637,7 @@
                             zIndex: () => {
                                 return PopsInstanceUtils.getPopsMaxZIndex().zIndex;
                             },
+                            isFixed: true,
                             className: "github-tooltip",
                             only: false,
                             eventOption: {
@@ -6652,7 +6657,6 @@
                                 }
                             },
                             alwaysShow: false,
-                            // only: false,
                             position: "top",
                             arrowDistance: 10,
                         });
@@ -9432,6 +9436,7 @@
             content: "默认文字",
             position: "top",
             className: "",
+            isFixed: false,
             alwaysShow: false,
             triggerShowEventName: "mouseenter touchstart",
             triggerCloseEventName: "mouseleave touchend",
@@ -9464,8 +9469,8 @@
         $data = {
             config: null,
             guid: null,
-            timeId_show: [],
-            timeId_close: [],
+            timeId_close_TouchEvent: [],
+            timeId_close_MouseEvent: [],
         };
         constructor(config, guid, ShadowInfo) {
             this.$data.config = config;
@@ -9497,6 +9502,9 @@
 				<div class="pops-tip-content" style="text-align: center;"></div>
 				<div class="pops-tip-arrow"></div>
 			`,
+            }, {
+                "data-position": this.$data.config.isFixed ? "fixed" : "absolute",
+                "data-guid": this.$data.guid,
             });
             /** 内容 */
             let $toolTipContent = $toolTipContainer.querySelector(".pops-tip-content");
@@ -9507,8 +9515,6 @@
                 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) {
@@ -9564,12 +9570,17 @@
          * @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 offsetInfo = popsDOMUtils.offset(targetElement, !this.$data.config.isFixed);
+            // 目标 宽
+            let targetElement_width = offsetInfo.width;
+            // 目标 高
+            let targetElement_height = offsetInfo.height;
+            // 目标 顶部距离
+            let targetElement_top = offsetInfo.top;
+            // let targetElement_bottom = offsetInfo.bottom;
+            // 目标 左边距离
+            let targetElement_left = offsetInfo.left;
+            // let targetElement_right = offsetInfo.right;
             let toolTipElement_width = popsDOMUtils.outerWidth(this.$el.$toolTip);
             let toolTipElement_height = popsDOMUtils.outerHeight(this.$el.$toolTip);
             /* 目标元素的x轴的中间位置 */
@@ -9625,39 +9636,56 @@
          */
         onEvent() {
             // 监听动画结束事件
-            this.onAnimationFinishEvent();
+            this.onToolTipAnimationFinishEvent();
             this.onShowEvent();
             this.onCloseEvent();
-            this.onMouseEnterEvent();
-            this.onMouseLeaveEvent();
+            this.onToolTipMouseEnterEvent();
+            this.onToolTipMouseLeaveEvent();
         }
         /**
          * 取消事件绑定
          */
         offEvent() {
-            this.offAnimationFinishEvent();
+            this.offToolTipAnimationFinishEvent();
             this.offShowEvent();
             this.offCloseEvent();
-            this.offMouseEnterEvent();
-            this.offMouseLeaveEvent();
+            this.offToolTipMouseEnterEvent();
+            this.offToolTipMouseLeaveEvent();
+        }
+        /**
+         * 添加关闭的timeId
+         * @param type
+         * @param timeId
+         */
+        addCloseTimeoutId(type, timeId) {
+            if (type === "MouseEvent") {
+                this.$data.timeId_close_MouseEvent.push(timeId);
+            }
+            else {
+                this.$data.timeId_close_TouchEvent.push(timeId);
+            }
         }
         /**
          * 清除延迟的timeId
+         * @param type 事件类型
          */
-        clearCloseTimeoutId(timeId) {
-            for (let index = 0; index < this.$data.timeId_close.length; index++) {
-                const currentTimeId = this.$data.timeId_close[index];
+        clearCloseTimeoutId(type, timeId) {
+            let timeIdList = type === "MouseEvent"
+                ? this.$data.timeId_close_MouseEvent
+                : this.$data.timeId_close_TouchEvent;
+            for (let index = 0; index < timeIdList.length; index++) {
+                const currentTimeId = timeIdList[index];
                 if (typeof timeId === "number") {
                     // 只清除一个
                     if (timeId == currentTimeId) {
                         clearTimeout(timeId);
-                        this.$data.timeId_close.splice(index, 1);
+                        timeIdList.splice(index, 1);
                         break;
                     }
                 }
                 else {
                     clearTimeout(currentTimeId);
-                    this.$data.timeId_close.splice(index, 1);
+                    timeIdList.splice(index, 1);
                     index--;
                 }
             }
@@ -9665,14 +9693,16 @@
         /**
          * 显示提示框
          */
-        show() {
+        show(...args) {
+            let event = args[0];
+            let eventType = event instanceof MouseEvent ? "MouseEvent" : "TouchEvent";
+            this.clearCloseTimeoutId(eventType);
             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();
@@ -9712,6 +9742,7 @@
          */
         close(...args) {
             let event = args[0];
+            let eventType = event instanceof MouseEvent ? "MouseEvent" : "TouchEvent";
             // 只判断鼠标事件
             // 其它的如Touch事件不做处理
             if (event && event instanceof MouseEvent) {
@@ -9734,12 +9765,12 @@
             }
             let timeId = setTimeout(() => {
                 // 设置属性触发关闭动画
-                this.clearCloseTimeoutId(timeId);
+                this.clearCloseTimeoutId(eventType, 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);
+            this.addCloseTimeoutId(eventType, timeId);
             if (typeof this.$data.config.closeAfterCallBack === "function") {
                 this.$data.config.closeAfterCallBack(this.$el.$toolTip);
             }
@@ -9775,7 +9806,7 @@
         /**
          * 动画结束事件
          */
-        animationFinishEvent() {
+        toolTipAnimationFinishEvent() {
             if (!this.$el.$toolTip) {
                 return;
             }
@@ -9785,21 +9816,21 @@
             this.destory();
         }
         /**
-         * 监听动画结束
+         * 监听tooltip的动画结束
          */
-        onAnimationFinishEvent() {
-            popsDOMUtils.on(this.$el.$toolTip, popsDOMUtils.getAnimationEndNameList(), this.animationFinishEvent.bind(this));
+        onToolTipAnimationFinishEvent() {
+            popsDOMUtils.on(this.$el.$toolTip, popsDOMUtils.getAnimationEndNameList(), this.toolTipAnimationFinishEvent.bind(this));
         }
         /**
-         * 取消监听动画结束
+         * 取消tooltip监听动画结束
          */
-        offAnimationFinishEvent() {
-            popsDOMUtils.off(this.$el.$toolTip, popsDOMUtils.getAnimationEndNameList(), this.animationFinishEvent.bind(this));
+        offToolTipAnimationFinishEvent() {
+            popsDOMUtils.off(this.$el.$toolTip, popsDOMUtils.getAnimationEndNameList(), this.toolTipAnimationFinishEvent.bind(this));
         }
         /**
          * 鼠标|触摸进入事件
          */
-        mouseEnterEvent() {
+        toolTipMouseEnterEvent() {
             this.$el.$toolTip.style.animationPlayState = "paused";
             // if (parseInt(getComputedStyle(toolTipElement)) > 0.5) {
             // toolTipElement.style.animationPlayState = "paused";
@@ -9808,33 +9839,34 @@
         /**
          * 监听鼠标|触摸事件
          */
-        onMouseEnterEvent() {
-            this.clearCloseTimeoutId();
-            popsDOMUtils.on(this.$el.$toolTip, "mouseenter touchstart", this.mouseEnterEvent.bind(this), this.$data.config.eventOption);
+        onToolTipMouseEnterEvent() {
+            this.clearCloseTimeoutId("MouseEvent");
+            this.clearCloseTimeoutId("TouchEvent");
+            popsDOMUtils.on(this.$el.$toolTip, "mouseenter touchstart", this.toolTipMouseEnterEvent.bind(this), this.$data.config.eventOption);
         }
         /**
          * 取消监听鼠标|触摸事件
          */
-        offMouseEnterEvent() {
-            popsDOMUtils.off(this.$el.$toolTip, "mouseenter touchstart", this.mouseEnterEvent.bind(this), this.$data.config.eventOption);
+        offToolTipMouseEnterEvent() {
+            popsDOMUtils.off(this.$el.$toolTip, "mouseenter touchstart", this.toolTipMouseEnterEvent.bind(this), this.$data.config.eventOption);
         }
         /**
          * 鼠标|触摸离开事件
          */
-        mouseLeaveEvent() {
+        toolTipMouseLeaveEvent() {
             this.$el.$toolTip.style.animationPlayState = "running";
         }
         /**
          * 监听鼠标|触摸离开事件
          */
-        onMouseLeaveEvent() {
-            popsDOMUtils.on(this.$el.$toolTip, "mouseleave touchend", this.mouseLeaveEvent.bind(this), this.$data.config.eventOption);
+        onToolTipMouseLeaveEvent() {
+            popsDOMUtils.on(this.$el.$toolTip, "mouseleave touchend", this.toolTipMouseLeaveEvent.bind(this), this.$data.config.eventOption);
         }
         /**
          * 取消监听鼠标|触摸离开事件
          */
-        offMouseLeaveEvent() {
-            popsDOMUtils.off(this.$el.$toolTip, "mouseleave touchend", this.mouseLeaveEvent.bind(this), this.$data.config.eventOption);
+        offToolTipMouseLeaveEvent() {
+            popsDOMUtils.off(this.$el.$toolTip, "mouseleave touchend", this.toolTipMouseLeaveEvent.bind(this), this.$data.config.eventOption);
         }
     }
     class PopsTooltip {