Slider: add tooltip-class (#9957)

examples/docs/en-US/slider.md

@@ -241,7 +241,8 @@ Selecting a range of values is supported.
 | vertical | vertical mode | boolean | — | false |
 | height | Slider height, required in vertical mode | string | — | — |
 | label | label for screen reader | string | — | — |
-|debounce| debounce delay when typing, in milliseconds, works when `show-input` is true | number | — | 300 |
+| debounce | debounce delay when typing, in milliseconds, works when `show-input` is true | number | — | 300 |
+| tooltip-class | custom class name for the tooltip | string | — | — |
 
 ## Events
 | Event Name | Description | Parameters |

examples/docs/es/slider.md

@@ -244,6 +244,7 @@ Se soporta la selección de un rango de valores.
 | height              | alto del Slider, requerido en modo vertical | string          | —                 | —           |
 | label               | etiqueta para screen reader              | string          | —                 | —           |
 | debounce            | retardo al escribir, en milisegundos, funciona cuando`show-input` es true. | number          | —                 | 300         |
+| tooltip-class       | custom class name for the tooltip | string | — | — |
 
 ## Eventos
 | Nombre | Descripción                              | Parametros               |

examples/docs/zh-CN/slider.md

@@ -239,6 +239,7 @@
 | height | Slider 高度，竖向模式时必填 | string | — | — |
 | label | 屏幕阅读器标签 | string | — | — |
 | debounce | 输入时的去抖延迟，毫秒，仅在`show-input`等于true时有效 | number | — | 300 |
+| tooltip-class | tooltip 的自定义类名 | string | — | — |
 
 ### Events
 | 事件名称      | 说明    | 回调参数      |

packages/slider/src/button.vue

@@ -15,7 +15,11 @@
     @keydown.down.prevent="onLeftKeyDown"
     @keydown.up.prevent="onRightKeyDown"
   >
-    <el-tooltip placement="top" ref="tooltip" :disabled="!showTooltip">
+    <el-tooltip
+      placement="top"
+      ref="tooltip"
+      :popper-class="tooltipClass"
+      :disabled="!showTooltip">
       <span slot="content">{{ formatValue }}</span>
       <div class="el-slider__button" :class="{ 'hover': hovering, 'dragging': dragging }"></div>
     </el-tooltip>
@@ -40,7 +44,8 @@
       vertical: {
         type: Boolean,
         default: false
-      }
+      },
+      tooltipClass: String
     },
 
     data() {

packages/slider/src/main.vue

@@ -33,11 +33,13 @@
       <slider-button
         :vertical="vertical"
         v-model="firstValue"
+        :tooltip-class="tooltipClass"
         ref="button1">
       </slider-button>
       <slider-button
         :vertical="vertical"
         v-model="secondValue"
+        :tooltip-class="tooltipClass"
         ref="button2"
         v-if="range">
       </slider-button>
@@ -122,7 +124,8 @@
       },
       label: {
         type: String
-      }
+      },
+      tooltipClass: String
     },
 
     components: {

types/slider.d.ts

@@ -53,4 +53,7 @@ export declare class ElSlider extends ElementUIComponent {
 
   /** Debounce delay when typing, in milliseconds, works when show-input is true */
   debounce: number
+
+  /** Custom class name for the tooltip */
+  tooltipClass: string
 }