如何在移动端触发Shadcn UI的Tooltip组件？

Shadcn UI的Tooltip默认依赖hover/聚焦触发，移动端没有原生hover事件，所以需要调整触发逻辑来支持点击激活。以下是具体实现方法：

直接修改Tooltip触发属性 #

Shadcn的Tooltip基于Radix UI封装，可直接通过透传属性修改触发方式：

import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";

// 使用示例
export function MobileClickTooltip() {
  return (
    <Tooltip trigger="click" mobile={{ enabled: true }}>
      <TooltipTrigger asChild>
        <button className="px-4 py-2 bg-slate-700 text-white rounded">点击显示提示</button>
      </TooltipTrigger>
      <TooltipContent>
        <p>这是移动端可点击触发的提示文本</p>
      </TooltipContent>
    </Tooltip>
  );
}

关键参数说明 #

• trigger="click"：将Tooltip的触发方式从默认的hover改为点击
• mobile={{ enabled: true }}：强制启用移动端适配，确保点击逻辑在小屏设备上正常生效

额外优化（可选） #

如果需要同时支持长按触发，可将trigger设为数组：

<Tooltip trigger={["click", "longPress"]} mobile={{ enabled: true }}>
  {/* 触发元素与提示内容 */}
</Tooltip>

内容的提问来源于stack exchange，提问作者Jasperan