组件
Tooltip
用于短说明、热键提示和低权重辅助信息
Tooltip
Tooltip 适合非常短的说明信息。
导入
import {
TooltipProvider,
Tooltip,
TooltipTrigger,
TooltipContent,
Button,
} from "@downcity/ui";最小示例
import {
Button,
TooltipProvider,
Tooltip,
TooltipTrigger,
TooltipContent,
} from "@downcity/ui";
export function RefreshTooltip() {
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger render={<Button size="icon-sm" variant="ghost" />}>
R
</TooltipTrigger>
<TooltipContent>刷新数据</TooltipContent>
</Tooltip>
</TooltipProvider>
);
}使用建议
- 只放很短的提示
- 默认适合热键说明、图标含义说明
- 复杂说明改用 Popover