【JS/TS鼠标气泡跟随】文本提示 / 操作提示

适用于任何类型项目：vue、react、angular、js、ts、jsp、jquery

1、功能封装：

TypeScript 复制代码

export function useMouseActionTip(text: string, parentEl: HTMLElement, offset?: XY) {
    function mousemove(e: MouseEvent) {
        const offsetX = offset?.x || 16;
        const offsetY = offset?.y || 16;
        cursorEl.style.left = e.pageX + offsetX + "px";
        cursorEl.style.top = e.pageY + offsetY + "px";
    }
    function mouseenter() {
        cursorEl.style.display = "block";
    }
    function mouseout() {
        cursorEl.style.display = "none";
    }
    const cursorEl = document.createElement("div");
    cursorEl.className = "_mouse_action_tip";
    cursorEl.innerHTML = text;
    cursorEl.style.display = "block";

    setStyle();
    document.body.appendChild(cursorEl);
    document.addEventListener("mousemove", mousemove);
    parentEl.addEventListener("mouseenter", mouseenter);
    parentEl.addEventListener("mouseout", mouseout);

    return {
        destroy() {
            document.removeEventListener("mousemove", mousemove);
            setStyle();
            parentEl.removeEventListener("mouseenter", mouseenter);
            parentEl.removeEventListener("mouseout", mouseout);
            document.body.removeChild(cursorEl);
        },
    };
}
export type UseMouseActionTip = ReturnType<typeof useMouseActionTip>;
let hasStyle = false;
function setStyle() {
    if (hasStyle) {
        return;
    }
    hasStyle = true;
    const styleElement = document.createElement("style");
    styleElement.textContent = `
    ._mouse_action_tip {
        position: fixed;
        display: flex;
        padding: 5px 10px;
        background-color: #33383e;
        color: #e8eaec;
        border-radius: 4px;
        pointer-events: none;
        z-index: 9999;
        box-shadow: rgba(255, 255, 255, 0.3) 0px 0px 3px, rgba(255, 255, 255, 0.3) 0px 0px 3px;
        font-size: 14px;
      }
    `;
    document.head.appendChild(styleElement);
}

2、使用：

TypeScript 复制代码

let mouseTip: UseMouseActionTip | undefined;
watch(
    () => editorStore.currentSubTool,
    () => {
            if (editorStore.currentSubTool === SubTools.Measure) {
                mouseTip = useMouseActionTip(
                    t("Editor.Tip.Hold_down_and_drag_the_mouse"),
                    editorStore.canvas().canvas.upperCanvasEl
                );
            } else {
                mouseTip?.destroy();
                mouseTip = undefined;
            }
    }
);