diff --git a/packages/slider/src/button.vue b/packages/slider/src/button.vue
index 67b9db0f78..876f6c437e 100644
--- a/packages/slider/src/button.vue
+++ b/packages/slider/src/button.vue
@@ -2,7 +2,7 @@
   <div
     ref="button"
     class="el-slider__button-wrapper"
-    :class="{ 'hover': hovering, 'dragging': dragging }"
+    :class="{ hover: hovering, dragging: dragging }"
     :style="wrapperStyle"
     tabindex="0"
     @mouseenter="handleMouseEnter"
@@ -20,6 +20,7 @@
       ref="tooltip"
       v-model="tooltipVisible"
       placement="top"
+      :stop-popper-mouse-event="false"
       :popper-class="tooltipClass"
       :disabled="!showTooltip"
       manual
@@ -27,7 +28,10 @@
       <template #content>
         <span>{{ formatValue }}</span>
       </template>
-      <div class="el-slider__button" :class="{ 'hover': hovering, 'dragging': dragging }"></div>
+      <div
+        class="el-slider__button"
+        :class="{ hover: hovering, dragging: dragging }"
+      ></div>
     </el-tooltip>
   </div>
 </template>
@@ -63,7 +67,6 @@ export default defineComponent({
   emits: [UPDATE_MODEL_EVENT],
 
   setup(props, { emit }) {
-
     const initData = reactive({
       hovering: false,
       dragging: false,
@@ -91,10 +94,7 @@ export default defineComponent({
       setPosition,
     } = useSliderButton(props, initData, emit)
 
-    const {
-      hovering,
-      dragging,
-    } = toRefs(initData)
+    const { hovering, dragging } = toRefs(initData)
 
     return {
       tooltip,
diff --git a/packages/tooltip/src/index.ts b/packages/tooltip/src/index.ts
index 8654d8a4d9..a577005caa 100644
--- a/packages/tooltip/src/index.ts
+++ b/packages/tooltip/src/index.ts
@@ -92,6 +92,10 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
+    stopPopperMouseEvent: {
+      type: Boolean,
+      default: true,
+    },
   },
   emits: [UPDATE_MODEL_EVENT],
   setup(props, ctx) {
@@ -134,6 +138,7 @@ export default defineComponent({
       transition,
       trigger,
       visibleArrow,
+      stopPopperMouseEvent,
     } = this
     const popper = h(
       ElPopper,
@@ -150,6 +155,7 @@ export default defineComponent({
         placement,
         showAfter: openDelay || showAfter, // this is for mapping API due to we decided to rename the current openDelay API to showAfter for better readability,
         showArrow: visibleArrow,
+        stopPopperMouseEvent,
         transition,
         trigger,
         popperOptions, // Breakings!: Once popperOptions is provided, the whole popper is under user's control, ElPopper nolonger generates the default options for popper, this is by design if the user wants the full control on @PopperJS, read the doc @https://popper.js.org/docs/v2/