fix(auto-tip): add popperClass for AutoTip directive (#3836)

* fix(auto-tip): add popperClass for AutoTip directive

* fix(docs): add version infomation

Author: shenjunjian

examples/sites/demos/pc/app/directives/webdoc/directives-auto-tip.js

@@ -42,6 +42,7 @@ export default {
           <li><code>content</code>属性，指定提示的内容，支持传入<code>string</code>，<code>VNode</code> 或<code>VNode 数组</code>。不传入值时，使用当前<code>Dom</code>元素的内容。  </li>  
           <li><code>effect</code> 属性，指定提示的效果，支持 <code>light</code> 和 <code>dark</code> ，默认是<code>light</code>亮色主题  </li>  
           <li><code>placement</code> 属性，指定提示的位置，默认值为<code>top</code> 。参见<code>tooltip</code> 组件的<code>placement</code> 属性。   </li>  
+          <li><code>popperClass</code> 属性，设置弹出层的class，该属性在3.28 版本引入 。参见<code>tooltip</code> 组件的<code>popperClass</code> 属性。 </li>  
         </ul>
         2、如果参数为 <code>false</code>，表示禁止自动提示。 <br>
         `,
@@ -53,6 +54,7 @@ export default {
           <li><code>content</code> property specifies the content of the prompt, which can be passed to <code>string</code>, <code>VNode</code>, or the <code>VNode array </code>. When no value is passed, the contents of the current <code>Dom</code> element are used. </li>
           <li><code>effect</code> property, specify the effect of the prompt, support <code>light</code> and <code>dark</code>, default is <code>light</code> bright color theme </li>
           <li><code>placement</code> property specifies the placement of the tip. The default value is <code>top</code>. See the <code>placement</code> property of the <code>tooltip</code> component. </li>
+          <li><code>popperClass</code> attribute, sets the class of the pop-up layer. See <code>tooltip</code> component's <code>popperClass</code> attribute. </li>
           </ul>
           2. If the parameter is <code>false</code>, the automatic prompt is disabled. <br>
         `

packages/vue-directive/src/auto-tip.ts

@@ -18,6 +18,7 @@ interface TooltipDirectiveConfig {
   content?: string // 自定义提示内容,  支持字符串或 VNode | VNode[], 不支持嵌套的 html 标签
   effect?: 'dark' | 'light' // tooltip主题，默认为light
   placement?: string
+  popperClass?: string
 }
 
 // 高度计算最多可以允许的误差，修复checkbox的tip提示一直显示的bug（scrollHeight：15，clientHeight：14）
@@ -55,6 +56,12 @@ const isDarkTheme = (currentTarget) => Boolean(currentTarget?.boundingValue?.eff
 
 const getPlacement = (currentTarget) => currentTarget.boundingValue?.placement || 'top'
 
+let oldPopperClass: string[] = []
+const getPopperClass = (currentTarget) => {
+  const cls: string = currentTarget.boundingValue?.popperClass || ''
+  return cls.split(' ').filter((c) => c)
+}
+
 const mouseenterHandler = (e) => {
   const currentTarget = e.currentTarget
 
@@ -73,10 +80,13 @@ const mouseenterHandler = (e) => {
         propsData: {
           renderContent: () => h('span', { class: 'tiny-directive-tip__content' }, tooltipContent.value),
           placement: getPlacement(currentTarget),
-          effect: isDarkTheme(currentTarget) ? 'dark' : 'light'
+          effect: isDarkTheme(currentTarget) ? 'dark' : 'light',
+          popperClass: getPopperClass(currentTarget).join(' ')
         },
         component: Tooltip
       })
+
+      oldPopperClass = getPopperClass(currentTarget)
     }
 
     const tooltip = globalTooltip.value
@@ -91,6 +101,9 @@ const mouseenterHandler = (e) => {
         `is-${isDarkTheme(currentTarget) ? 'light' : 'dark'}`,
         `is-${isDarkTheme(currentTarget) ? 'dark' : 'light'}`
       )
+      popperElm.classList.remove(...oldPopperClass)
+      oldPopperClass = getPopperClass(currentTarget)
+      popperElm.classList.add(...oldPopperClass)
     }
 
     tooltip.show()