From 5136bb90bdd3e388be25132ca57a7dee8340485c Mon Sep 17 00:00:00 2001
From: oneao <hi_itao@163.com>
Date: Sun, 7 Sep 2025 21:52:14 +0800
Subject: [PATCH] u

---
 .../packages/ao-design/src/popup/index.scss   |  62 ++-
 .../packages/ao-design/src/popup/index.tsx    | 219 ++++++++++-
 code/base-project/base-vue/src/App.vue        |  61 ++-
 code/base-project/base-vue/test.html          | 367 +++++++++++++-----
 4 files changed, 595 insertions(+), 114 deletions(-)

diff --git a/code/base-project/base-vue/packages/ao-design/src/popup/index.scss b/code/base-project/base-vue/packages/ao-design/src/popup/index.scss
index 2468d012..3dd93799 100644
--- a/code/base-project/base-vue/packages/ao-design/src/popup/index.scss
+++ b/code/base-project/base-vue/packages/ao-design/src/popup/index.scss
@@ -1,10 +1,58 @@
-@use '../_styles/_variables.scss' as *;
+.popup-reference {
+  display: inline-block; /* keeps reference size */
+}
 
-$popup-prefix: #{$prefix}-popup;
+.popup {
+  position: absolute;
+  background: #333;
+  color: #fff;
+  padding: 6px 10px;
+  border-radius: 4px;
+  font-size: 13px;
+  white-space: nowrap;
+  z-index: 1000;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
+
+  .popup-content {
+    pointer-events: none;
+  }
+
+  .popup-arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-style: solid;
+  }
+
+  &.popup-top .popup-arrow {
+    bottom: -6px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 6px 6px 0 6px;
+    border-color: #333 transparent transparent transparent;
+  }
 
-.#{$popup-prefix} {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  width: 100%;
+  &.popup-bottom .popup-arrow {
+    top: -6px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 0 6px 6px 6px;
+    border-color: transparent transparent #333 transparent;
+  }
+
+  &.popup-left .popup-arrow {
+    right: -6px;
+    top: 50%;
+    transform: translateY(-50%);
+    border-width: 6px 0 6px 6px;
+    border-color: transparent transparent transparent #333;
+  }
+
+  &.popup-right .popup-arrow {
+    left: -6px;
+    top: 50%;
+    transform: translateY(-50%);
+    border-width: 6px 6px 6px 0;
+    border-color: transparent #333 transparent transparent;
+  }
 }
diff --git a/code/base-project/base-vue/packages/ao-design/src/popup/index.tsx b/code/base-project/base-vue/packages/ao-design/src/popup/index.tsx
index 5a694975..61dc6c82 100644
--- a/code/base-project/base-vue/packages/ao-design/src/popup/index.tsx
+++ b/code/base-project/base-vue/packages/ao-design/src/popup/index.tsx
@@ -1,15 +1,216 @@
-import { defineComponent } from 'vue'
-import { getPrefixCls } from '../_utils/getPrefixCls'
+import type { PropType } from 'vue'
+import { cloneVNode, defineComponent, nextTick, onBeforeUnmount, onMounted, ref, Teleport } from 'vue'
+
+type Placement = 'top' | 'bottom' | 'left' | 'right'
+type Trigger = 'hover' | 'click'
 
 export default defineComponent({
-  name: 'Popup',
+  name: 'APopup',
+  props: {
+    placement: { type: String as PropType<Placement>, default: 'top' },
+    trigger: { type: String as PropType<Trigger>, default: 'hover' },
+    content: { type: String, required: true },
+    attach: { type: [String, Object] as PropType<string | HTMLElement>, default: 'body' },
+  },
   setup(props, { slots }) {
-    const prefixCls = getPrefixCls('popup')
+    const reference = ref<HTMLElement | null>(null)
+    const popup = ref<HTMLElement | null>(null)
+    const visible = ref(false)
 
-    return () => (
-      <div class={prefixCls}>
-        {/* {slots?.default()} */}
-      </div>
-    )
+    const getAttachTarget = (): HTMLElement => {
+      if (typeof props.attach === 'string') {
+        const el = document.querySelector(props.attach)
+        return (el as HTMLElement) || document.body
+      }
+      return props.attach as HTMLElement || document.body
+    }
+
+    const show = async () => {
+      if (visible.value)
+        return
+      visible.value = true
+      await nextTick()
+      updatePosition()
+      attachPopupHover()
+      if (props.trigger === 'click')
+        document.addEventListener('click', onClickOutside)
+    }
+
+    const hide = () => {
+      if (!visible.value)
+        return
+      visible.value = false
+      if (props.trigger === 'click')
+        document.removeEventListener('click', onClickOutside)
+    }
+
+    const toggle = () => (visible.value ? hide() : show())
+
+    const onClickOutside = (e: MouseEvent) => {
+      const t = e.target as Node
+      if (!reference.value || !popup.value)
+        return
+      if (!reference.value.contains(t) && !popup.value.contains(t))
+        hide()
+    }
+
+    const updatePosition = () => {
+      if (!reference.value || !popup.value)
+        return
+
+      const attachTarget = getAttachTarget()
+      const rect = reference.value.getBoundingClientRect()
+      const attachRect = attachTarget === document.body ? { left: 0, top: 0 } : attachTarget.getBoundingClientRect()
+      const scrollX = attachTarget === document.body ? window.scrollX : attachTarget.scrollLeft
+      const scrollY = attachTarget === document.body ? window.scrollY : attachTarget.scrollTop
+
+      const tip = popup.value
+      const gap = 8
+
+      const prevDisplay = tip.style.display
+      tip.style.display = 'block'
+      tip.style.visibility = 'hidden'
+      const tipRect = tip.getBoundingClientRect()
+      tip.style.visibility = ''
+      tip.style.display = visible.value ? 'block' : prevDisplay || 'none'
+
+      let left = 0
+      let top = 0
+      let finalPlacement = props.placement
+
+      const baseX = rect.left - attachRect.left + scrollX
+      const baseY = rect.top - attachRect.top + scrollY
+
+      // 自动翻转逻辑
+      if (props.placement === 'top') {
+        left = baseX + rect.width / 2 - tipRect.width / 2
+        top = baseY - tipRect.height - gap
+        if (top < 0) {
+          finalPlacement = 'bottom'
+          top = baseY + rect.height + gap
+        }
+      }
+      else if (props.placement === 'bottom') {
+        left = baseX + rect.width / 2 - tipRect.width / 2
+        top = baseY + rect.height + gap
+        const maxY = attachTarget === document.body ? window.innerHeight + scrollY : attachTarget.clientHeight + scrollY
+        if (top + tipRect.height > maxY) {
+          finalPlacement = 'top'
+          top = baseY - tipRect.height - gap
+        }
+      }
+      else if (props.placement === 'left') {
+        left = baseX - tipRect.width - gap
+        top = baseY + rect.height / 2 - tipRect.height / 2
+        if (left < 0) {
+          finalPlacement = 'right'
+          left = baseX + rect.width + gap
+        }
+      }
+      else {
+        left = baseX + rect.width + gap
+        top = baseY + rect.height / 2 - tipRect.height / 2
+        const maxX = attachTarget === document.body ? window.innerWidth + scrollX : attachTarget.clientWidth + scrollX
+        if (left + tipRect.width > maxX) {
+          finalPlacement = 'left'
+          left = baseX - tipRect.width - gap
+        }
+      }
+
+      left = Math.max(6, left)
+      top = Math.max(6, top)
+
+      tip.style.left = `${left}px`
+      tip.style.top = `${top}px`
+
+      const arrow = tip.querySelector('.popup-arrow') as HTMLElement
+      if (arrow) {
+        const minOffset = 12
+        if (finalPlacement === 'top' || finalPlacement === 'bottom') {
+          let arrowOffset = baseX + rect.width / 2 - left
+          arrowOffset = Math.min(Math.max(arrowOffset, minOffset), tipRect.width - minOffset)
+          arrow.style.left = `${arrowOffset}px`
+          arrow.style.top = ''
+        }
+        else {
+          let arrowOffset = baseY + rect.height / 2 - top
+          arrowOffset = Math.min(Math.max(arrowOffset, minOffset), tipRect.height - minOffset)
+          arrow.style.top = `${arrowOffset}px`
+          arrow.style.left = ''
+        }
+      }
+
+      tip.className = `popup popup-${finalPlacement}`
+    }
+
+    const attachPopupHover = () => {
+      if (!popup.value || props.trigger !== 'hover')
+        return
+      popup.value.addEventListener('mouseenter', show)
+      popup.value.addEventListener('mouseleave', hide)
+    }
+
+    const detachPopupHover = () => {
+      if (!popup.value)
+        return
+      popup.value.removeEventListener('mouseenter', show)
+      popup.value.removeEventListener('mouseleave', hide)
+    }
+
+    onMounted(() => {
+      if (reference.value) {
+        if (props.trigger === 'hover') {
+          reference.value.addEventListener('mouseenter', show)
+          reference.value.addEventListener('mouseleave', hide)
+        }
+        else {
+          reference.value.addEventListener('click', (e) => {
+            e.stopPropagation()
+            toggle()
+          })
+        }
+      }
+      window.addEventListener('resize', updatePosition)
+      window.addEventListener('scroll', updatePosition, true)
+    })
+
+    onBeforeUnmount(() => {
+      if (reference.value) {
+        reference.value.removeEventListener('mouseenter', show)
+        reference.value.removeEventListener('mouseleave', hide)
+        reference.value.removeEventListener('click', toggle)
+      }
+      detachPopupHover()
+      document.removeEventListener('click', onClickOutside)
+      window.removeEventListener('resize', updatePosition)
+      window.removeEventListener('scroll', updatePosition, true)
+    })
+
+    return () => {
+      const defaultSlot = slots.default?.()
+      if (!defaultSlot || defaultSlot.length !== 1)
+        return null
+
+      // 克隆触发元素并绑定 ref 和事件
+      const triggerEl = cloneVNode(defaultSlot[0], { ref: reference })
+
+      return (
+        <>
+          {triggerEl}
+          <Teleport to={getAttachTarget()}>
+            <div
+              ref={popup}
+              class={['popup', `popup-${props.placement}`]}
+              style={{ position: 'absolute', display: visible.value ? 'block' : 'none' }}
+              aria-hidden={!visible.value}
+              role="tooltip"
+            >
+              <div class="popup-content">{props.content}</div>
+              <div class="popup-arrow" />
+            </div>
+          </Teleport>
+        </>
+      )
+    }
   },
 })
diff --git a/code/base-project/base-vue/src/App.vue b/code/base-project/base-vue/src/App.vue
index ef4526f0..bb465f73 100644
--- a/code/base-project/base-vue/src/App.vue
+++ b/code/base-project/base-vue/src/App.vue
@@ -1,4 +1,4 @@
-<script setup>
+<!-- <script setup>
 import { arrow, offset, useFloating } from '@floating-ui/vue'
 import { ref } from 'vue'
 
@@ -9,7 +9,7 @@ const floatingArrow = ref(null)
 // 使用 useFloating 计算浮动位置
 const { floatingStyles, middlewareData } = useFloating(reference, floating, {
   middleware: [offset(8), arrow({ element: floatingArrow })],
-  placement: 'bottom',
+  placement: 'top',
 })
 </script>
 
@@ -40,6 +40,10 @@ const { floatingStyles, middlewareData } = useFloating(reference, floating, {
         }"
       />
     </div>
+
+    <APopup content="提示内容" placement="left" trigger="hover">
+      <button>悬停或聚焦</button>
+    </APopup>
   </div>
 </template>
 
@@ -47,19 +51,62 @@ const { floatingStyles, middlewareData } = useFloating(reference, floating, {
 /* tooltip 样式 */
 .floating {
   padding: 6px 12px;
-  background-color: #fff;
-  color: #333;
+  background-color: #000;
+  color: #fff;
   border-radius: 2px;
   font-size: 12px;
   white-space: nowrap;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 添加阴影 */
 }
 /* 箭头 */
 .arrow {
   position: absolute;
   width: 8px;
   height: 8px;
-  background-color: #fff;
+  background-color: #000;
   transform: rotate(45deg);
 }
-</style>
+</style> -->
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const containerRef = ref<HTMLElement | null>(null)
+</script>
+
+<template>
+  <div style="padding: 20px; display: flex; flex-direction: column; gap: 20px;">
+    <!-- 1. placement: 控制弹出方向 -->
+    <APopup placement="top" trigger="hover" content="上方 Tooltip">
+      <button>Hover Top</button>
+    </APopup>
+
+    <APopup placement="bottom" trigger="hover" content="下方 Tooltip">
+      <button>Hover Bottom</button>
+    </APopup>
+
+    <APopup placement="left" trigger="hover" content="左侧 Tooltip">
+      <button>Hover Left</button>
+    </APopup>
+
+    <APopup placement="right" trigger="hover" content="右侧 Tooltip">
+      <button>Hover Right</button>
+    </APopup>
+
+    <!-- 2. trigger: hover 或 click -->
+    <APopup placement="top" trigger="click" content="点击触发 Tooltip">
+      <button>Click Me</button>
+    </APopup>
+
+    <!-- 3. content: 弹出内容 -->
+    <APopup placement="bottom" trigger="hover" content="这是自定义内容">
+      <button>Hover Custom Content</button>
+    </APopup>
+
+    <!-- 4. attach: 弹出挂载容器 -->
+    <!-- 使用 ref 挂载 -->
+    <div ref="containerRef" style="position: relative; margin-top: 50px; height: 100px; border: 1px solid #ccc; padding: 10px;">
+      <APopup placement="right" trigger="hover" content="挂载到 ref 容器" :attach="containerRef">
+        <button>Hover Ref Container</button>
+      </APopup>
+    </div>
+  </div>
+</template>
diff --git a/code/base-project/base-vue/test.html b/code/base-project/base-vue/test.html
index b5e8a465..a8469885 100644
--- a/code/base-project/base-vue/test.html
+++ b/code/base-project/base-vue/test.html
@@ -1,105 +1,290 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Popup with Arrow</title>
-<style>
-  body {
-    font-family: Arial, sans-serif;
-    padding: 50px;
-  }
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>12方向Tooltip</title>
+    <style>
+      /* 基础样式 */
+      body {
+        min-height: 100vh;
+        margin: 0;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: center;
+        gap: 2rem;
+        padding: 2rem;
+        background: #f0f2f5;
+      }
 
-  /* 触发按钮 */
-  .btn {
-    padding: 10px 20px;
-    background-color: #3498db;
-    color: white;
-    border: none;
-    cursor: pointer;
-    border-radius: 4px;
-  }
+      .trigger {
+        padding: 0.8rem 1.6rem;
+        border: none;
+        border-radius: 6px;
+        background: #2196f3;
+        color: white;
+        font-size: 1rem;
+        cursor: pointer;
+        transition: opacity 0.2s;
+      }
 
-  /* Popup 基础样式 */
-  .popup {
-    position: absolute;
-    padding: 10px 15px;
-    background-color: #333;
-    color: #fff;
-    border-radius: 6px;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
-    display: none;
-    z-index: 100;
-    max-width: 200px;
-    text-align: center;
-  }
+      .trigger:hover {
+        opacity: 0.9;
+      }
 
-  /* 箭头公共样式 */
-  .popup::after {
-    content: '';
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-style: solid;
-  }
+      /* Tooltip 核心样式 */
+      .tooltip {
+        position: fixed;
+        z-index: 10000;
+        min-width: 60px;
+        max-width: 240px;
+        padding: 0.8rem 1.2rem;
+        background: rgba(0, 0, 0, 0.8);
+        color: white;
+        font-size: 0.9rem;
+        line-height: 1.4;
+        border-radius: 4px;
+        visibility: hidden;
+        opacity: 0;
+        transition:
+          opacity 0.2s,
+          visibility 0.2s;
+        pointer-events: none;
+      }
 
-  /* 箭头方向 */
-  .popup.top::after {
-    bottom: -8px;
-    left: 50%;
-    transform: translateX(-50%);
-    border-width: 8px 8px 0 8px;
-    border-color: #333 transparent transparent transparent;
-  }
+      /* 箭头通用样式 */
+      .tooltip::after {
+        content: '';
+        position: absolute;
+        width: 0;
+        height: 0;
+        border: 6px solid transparent;
+      }
 
-  .popup.bottom::after {
-    top: -8px;
-    left: 50%;
-    transform: translateX(-50%);
-    border-width: 0 8px 8px 8px;
-    border-color: transparent transparent #333 transparent;
-  }
+      /* 不同方向的样式 */
+      /* 上方系列 */
+      .tooltip.top {
+        transform: translate(-50%, calc(-100% - 12px));
+      }
+      .tooltip.top::after {
+        bottom: -12px;
+        left: 50%;
+        transform: translateX(-50%);
+        border-top-color: rgba(0, 0, 0, 0.8);
+      }
 
-  .popup.left::after {
-    top: 50%;
-    right: -8px;
-    transform: translateY(-50%);
-    border-width: 8px 0 8px 8px;
-    border-color: transparent transparent transparent #333;
-  }
+      .tooltip.top-left {
+        transform: translate(calc(-100% + 12px), calc(-100% - 12px));
+      }
+      .tooltip.top-left::after {
+        bottom: -12px;
+        left: 12px;
+        border-top-color: rgba(0, 0, 0, 0.8);
+      }
 
-  .popup.right::after {
-    top: 50%;
-    left: -8px;
-    transform: translateY(-50%);
-    border-width: 8px 8px 8px 0;
-    border-color: transparent #333 transparent transparent;
-  }
-</style>
-</head>
-<body>
+      .tooltip.top-right {
+        transform: translate(12px, calc(-100% - 12px));
+      }
+      .tooltip.top-right::after {
+        bottom: -12px;
+        right: 12px;
+        border-top-color: rgba(0, 0, 0, 0.8);
+      }
 
-<button class="btn" id="btn">Hover me</button>
+      /* 下方系列 */
+      .tooltip.bottom {
+        transform: translate(-50%, 12px);
+      }
+      .tooltip.bottom::after {
+        top: -12px;
+        left: 50%;
+        transform: translateX(-50%);
+        border-bottom-color: rgba(0, 0, 0, 0.8);
+      }
 
-<div class="popup top" id="popup">这是一个带箭头的 Popup!</div>
+      .tooltip.bottom-left {
+        transform: translate(calc(-100% + 12px), 12px);
+      }
+      .tooltip.bottom-left::after {
+        top: -12px;
+        left: 12px;
+        border-bottom-color: rgba(0, 0, 0, 0.8);
+      }
 
-<script>
-  const btn = document.getElementById('btn');
-  const popup = document.getElementById('popup');
+      .tooltip.bottom-right {
+        transform: translate(12px, 12px);
+      }
+      .tooltip.bottom-right::after {
+        top: -12px;
+        right: 12px;
+        border-bottom-color: rgba(0, 0, 0, 0.8);
+      }
 
-  // 鼠标悬停显示
-  btn.addEventListener('mouseenter', () => {
-    const rect = btn.getBoundingClientRect();
-    popup.style.display = 'block';
-    // 设置 Popup 位置（示例：顶部）
-    popup.style.left = rect.left + rect.width / 2 - popup.offsetWidth / 2 + 'px';
-    popup.style.top = rect.top - popup.offsetHeight - 10 + 'px';
-  });
+      /* 左侧系列 */
+      .tooltip.left {
+        transform: translate(calc(-100% - 12px), -50%);
+      }
+      .tooltip.left::after {
+        right: -12px;
+        top: 50%;
+        transform: translateY(-50%);
+        border-left-color: rgba(0, 0, 0, 0.8);
+      }
 
-  btn.addEventListener('mouseleave', () => {
-    popup.style.display = 'none';
-  });
-</script>
+      .tooltip.left-top {
+        transform: translate(calc(-100% - 12px), calc(-100% + 12px));
+      }
+      .tooltip.left-top::after {
+        right: -12px;
+        top: 12px;
+        border-left-color: rgba(0, 0, 0, 0.8);
+      }
 
-</body>
+      .tooltip.left-bottom {
+        transform: translate(calc(-100% - 12px), 12px);
+      }
+      .tooltip.left-bottom::after {
+        right: -12px;
+        bottom: 12px;
+        border-left-color: rgba(0, 0, 0, 0.8);
+      }
+
+      /* 右侧系列 */
+      .tooltip.right {
+        transform: translate(12px, -50%);
+      }
+      .tooltip.right::after {
+        left: -12px;
+        top: 50%;
+        transform: translateY(-50%);
+        border-right-color: rgba(0, 0, 0, 0.8);
+      }
+
+      .tooltip.right-top {
+        transform: translate(12px, calc(-100% + 12px));
+      }
+      .tooltip.right-top::after {
+        left: -12px;
+        top: 12px;
+        border-right-color: rgba(0, 0, 0, 0.8);
+      }
+
+      .tooltip.right-bottom {
+        transform: translate(12px, 12px);
+      }
+      .tooltip.right-bottom::after {
+        left: -12px;
+        bottom: 12px;
+        border-right-color: rgba(0, 0, 0, 0.8);
+      }
+
+      /* 显示状态 */
+      .tooltip.visible {
+        visibility: visible;
+        opacity: 1;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- 触发元素示例 -->
+    <button class="trigger" data-tooltip="顶部提示" data-direction="top">顶部</button>
+    <button class="trigger" data-tooltip="顶部左侧提示" data-direction="top-left">顶部左</button>
+    <button class="trigger" data-tooltip="顶部右侧提示" data-direction="top-right">顶部右</button>
+    <button class="trigger" data-tooltip="底部提示" data-direction="bottom">底部</button>
+    <button class="trigger" data-tooltip="底部左侧提示" data-direction="bottom-left">底部左</button>
+    <button class="trigger" data-tooltip="底部右侧提示" data-direction="bottom-right">底部右</button>
+    <button class="trigger" data-tooltip="左侧提示" data-direction="left">左侧</button>
+    <button class="trigger" data-tooltip="左侧顶部提示" data-direction="left-top">左侧顶</button>
+    <button class="trigger" data-tooltip="左侧底部提示" data-direction="left-bottom">左侧底</button>
+    <button class="trigger" data-tooltip="右侧提示" data-direction="right">右侧</button>
+    <button class="trigger" data-tooltip="右侧顶部提示" data-direction="right-top">右侧顶</button>
+    <button class="trigger" data-tooltip="右侧底部提示" data-direction="right-bottom">右侧底</button>
+
+    <script>
+      class TooltipManager {
+        constructor() {
+          this.tooltip = null
+          this.init()
+        }
+
+        init() {
+          // 创建tooltip元素
+          this.tooltip = document.createElement('div')
+          this.tooltip.className = 'tooltip'
+          document.body.appendChild(this.tooltip)
+
+          // 绑定触发事件
+          document.querySelectorAll('.trigger').forEach((trigger) => {
+            trigger.addEventListener('mouseenter', (e) => this.show(e))
+            trigger.addEventListener('mouseleave', () => this.hide())
+          })
+        }
+
+        show(e) {
+          const { direction } = e.target.dataset
+          const text = e.target.dataset.tooltip
+          const triggerRect = e.target.getBoundingClientRect()
+
+          // 设置内容
+          this.tooltip.textContent = text
+          this.tooltip.className = `tooltip ${direction}`
+
+          // 计算初始位置
+          const { offsetWidth: tw, offsetHeight: th } = this.tooltip
+          const { left: tx, top: ty, width: trw, height: thr } = triggerRect
+          const offset = 12 // 基础偏移量
+
+          // 方向位置映射
+          const positionMap = {
+            top: { left: tx + trw / 2, top: ty - th - offset },
+            'top-left': { left: tx + trw - 12, top: ty - th - offset },
+            'top-right': { left: tx + 12, top: ty - th - offset },
+            bottom: { left: tx + trw / 2, top: ty + thr + offset },
+            'bottom-left': { left: tx + trw - 12, top: ty + thr + offset },
+            'bottom-right': { left: tx + 12, top: ty + thr + offset },
+            left: { left: tx - tw - offset, top: ty + thr / 2 },
+            'left-top': { left: tx - tw - offset, top: ty + 12 },
+            'left-bottom': { left: tx - tw - offset, top: ty + thr - 12 },
+            right: { left: tx + trw + offset, top: ty + thr / 2 },
+            'right-top': { left: tx + trw + offset, top: ty + 12 },
+            'right-bottom': { left: tx + trw + offset, top: ty + thr - 12 },
+          }
+
+          // 获取计算后的位置
+          let { left, top } = positionMap[direction]
+
+          // 边界检测（防止超出视口）
+          const viewportWidth = window.innerWidth
+          const viewportHeight = window.innerHeight
+
+          // 水平方向边界处理
+          if (left < 0)
+            left = 12 // 左边界
+          else if (left + tw > viewportWidth) left = viewportWidth - tw - 12 // 右边界
+
+          // 垂直方向边界处理
+          if (top < 0)
+            top = 12 // 上边界
+          else if (top + th > viewportHeight) top = viewportHeight - th - 12 // 下边界
+
+          // 应用位置
+          this.tooltip.style.left = `${left}px`
+          this.tooltip.style.top = `${top}px`
+
+          // 显示tooltip
+          requestAnimationFrame(() => {
+            this.tooltip.classList.add('visible')
+          })
+        }
+
+        hide() {
+          this.tooltip.classList.remove('visible')
+        }
+      }
+
+      // 初始化Tooltip管理器
+      new TooltipManager()
+    </script>
+  </body>
 </html>