如何在Chakra UI Tooltip内嵌入MdWarningAmber图标（React）

要把图标放到Tooltip的提示框里，不能用label属性传文本，得用Chakra UI的组合式组件自定义提示框内容，具体实现如下：

修正后的完整代码 #

import { Tooltip, TooltipTrigger, TooltipContent, Button, Icon } from '@chakra-ui/react';
import { MdWarningAmber } from 'react-icons/md';

// 组件内使用
<Tooltip placement='right-end' closeDelay={100} aria-label="tooltip">
  <TooltipTrigger>
    <Button>Hover Over Me</Button>
  </TooltipTrigger>
  <TooltipContent bg="white" color="#8e8e8e" className="tooltip">
    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
      <Icon as={MdWarningAmber} color="#8e8e8e" />
      <span>Access to this page is exclusively available to registered users.</span>
    </div>
  </TooltipContent>
</Tooltip>

关键说明 #

• 组件拆分：用TooltipTrigger包裹触发悬停的按钮，TooltipContent专门定义提示框的内容（包含图标和文本），替代原来的label属性
• 样式迁移：原来的bg、文本颜色等样式属性需要移到TooltipContent上
• 布局调整：通过flex布局让图标和文本横向对齐，用gap控制两者间距

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