fix(components): [el-tooltip] restoring append-to API (#5296)

- Restore `append-to` API
- Add test against `append-to` API

packages/components/tooltip/__tests__/content.spec.ts

@@ -202,5 +202,21 @@ describe('<ElTooltipContent />', () => {
         })
       })
     })
+
+    it('should append to', async () => {
+      const el = document.createElement('div')
+      const id = 'test_id'
+      el.id = id
+      document.body.appendChild(el)
+
+      wrapper = createComponent({
+        appendTo: `#${id}`,
+      })
+
+      await nextTick()
+
+      expect(el.children).toHaveLength(1)
+      expect(el.querySelector('[aria-hidden="true"]')).not.toBeNull()
+    })
   })
 })

packages/components/tooltip/src/content.vue

@@ -1,5 +1,5 @@
 <template>
-  <teleport :disabled="!teleported" :to="POPPER_CONTAINER_SELECTOR">
+  <teleport :disabled="!teleported" :to="appendTo">
     <transition
       :name="transition"
       @after-leave="onTransitionLeave"
@@ -44,10 +44,7 @@ import { onClickOutside } from '@vueuse/core'
 import { ElPopperContent } from '@element-plus/components/popper'
 import { ElVisuallyHidden } from '@element-plus/components/visual-hidden'
 import { composeEventHandlers } from '@element-plus/utils/dom'
-import {
-  useEscapeKeydown,
-  POPPER_CONTAINER_SELECTOR,
-} from '@element-plus/hooks'
+import { useEscapeKeydown } from '@element-plus/hooks'
 
 import { useTooltipContentProps } from './tooltip'
 import { TOOLTIP_INJECTION_KEY } from './tokens'
@@ -156,7 +153,6 @@ export default defineComponent({
       shouldRender,
       shouldShow,
       open,
-      POPPER_CONTAINER_SELECTOR,
       onAfterShow,
       onBeforeEnter,
       onContentEnter,

packages/components/tooltip/src/tooltip.ts

@@ -3,7 +3,10 @@ import {
   usePopperTriggerProps,
   usePopperContentProps,
 } from '@element-plus/components/popper'
-import { useDelayedToggleProps } from '@element-plus/hooks'
+import {
+  useDelayedToggleProps,
+  POPPER_CONTAINER_SELECTOR,
+} from '@element-plus/hooks'
 
 import type { ExtractPropTypes, PropType } from 'vue'
 
@@ -15,6 +18,10 @@ export const useTooltipContentProps = {
   ...useDelayedToggleProps,
   ...usePopperContentProps,
   ...buildProps({
+    appendTo: {
+      type: definePropType<string | HTMLElement>([String, Object]),
+      default: POPPER_CONTAINER_SELECTOR,
+    },
     content: {
       type: String,
       default: '',