|
|
@@ -3,18 +3,46 @@ let r = null
|
|
|
let l = null
|
|
|
|
|
|
export function useMouseTooltip() {
|
|
|
- // 🔥 修复:进入元素时 立刻更新位置 + 节流合并
|
|
|
+ const TOOLTIP_WIDTH = 80
|
|
|
+ const TOOLTIP_HEIGHT = 40
|
|
|
+ const PADDING = 16
|
|
|
+
|
|
|
+ const updateTooltipPosition = (clientX, clientY) => {
|
|
|
+ const viewportWidth = window.innerWidth
|
|
|
+ const viewportHeight = window.innerHeight
|
|
|
+
|
|
|
+ let x = clientX
|
|
|
+ let y = clientY
|
|
|
+ let flipX = false
|
|
|
+ let flipY = false
|
|
|
+
|
|
|
+ if (clientX + TOOLTIP_WIDTH + PADDING > viewportWidth) {
|
|
|
+ x = clientX - TOOLTIP_WIDTH - PADDING
|
|
|
+ flipX = true
|
|
|
+ }
|
|
|
+
|
|
|
+ if (clientY + TOOLTIP_HEIGHT + PADDING > viewportHeight) {
|
|
|
+ y = clientY - TOOLTIP_HEIGHT - PADDING
|
|
|
+ flipY = true
|
|
|
+ }
|
|
|
+
|
|
|
+ x = Math.max(PADDING, x)
|
|
|
+ y = Math.max(PADDING, y)
|
|
|
+
|
|
|
+ document.documentElement.style.setProperty('--mouse-x', x + 'px')
|
|
|
+ document.documentElement.style.setProperty('--mouse-y', y + 'px')
|
|
|
+ document.documentElement.style.setProperty('--tooltip-flip-x', flipX ? 'true' : 'false')
|
|
|
+ document.documentElement.style.setProperty('--tooltip-flip-y', flipY ? 'true' : 'false')
|
|
|
+ }
|
|
|
+
|
|
|
const u = (e, instant = false) => {
|
|
|
- // 切换元素时 → 强制立刻刷新
|
|
|
if (instant) {
|
|
|
- document.documentElement.style.setProperty('--mouse-x', e.clientX + 'px')
|
|
|
- document.documentElement.style.setProperty('--mouse-y', e.clientY + 'px')
|
|
|
+ updateTooltipPosition(e.clientX, e.clientY)
|
|
|
}
|
|
|
|
|
|
clearTimeout(t)
|
|
|
t = setTimeout(() => {
|
|
|
- document.documentElement.style.setProperty('--mouse-x', e.clientX + 'px')
|
|
|
- document.documentElement.style.setProperty('--mouse-y', e.clientY + 'px')
|
|
|
+ updateTooltipPosition(e.clientX, e.clientY)
|
|
|
}, 200)
|
|
|
}
|
|
|
|
|
|
@@ -22,6 +50,8 @@ export function useMouseTooltip() {
|
|
|
clearTimeout(t)
|
|
|
document.documentElement.style.removeProperty('--mouse-x')
|
|
|
document.documentElement.style.removeProperty('--mouse-y')
|
|
|
+ document.documentElement.style.removeProperty('--tooltip-flip-x')
|
|
|
+ document.documentElement.style.removeProperty('--tooltip-flip-y')
|
|
|
}
|
|
|
|
|
|
const i = () => {
|