Fluent-ui 中 TooltipHost 的背景颜色

Question

在 Fluent-ui 中使用 TooltipHost 时，我可以将背景颜色应用于工具提示吗？我试过

const ttStyles: Partial<ITooltipHostStyles> = { 
    root: { display: 'inline-block', background:'yellow'} 
};

但它并没有改变颜色。

谢谢

Answer 1

TooltipHost 只是一个元素的包装器，它应该显示工具提示，而不是工具提示本身。因此，您需要在 Tooltip 上设置一些样式。但由于 Tooltip 是由 Callout 组件组成，因此您需要在底层 Callout 组件上设置相应的样式。也许我错过了一些更简单的东西，但这是我需要做的才能更改工具提示的背景颜色：

<TooltipHost
  content="Tooltip Content"
  tooltipProps={{
    calloutProps: {
      styles: {
        beak: { background: 'yellow' },
        beakCurtain: { background: 'yellow' },
        calloutMain: { background: 'yellow' },
      },
    },
  }}
>
  <Icon iconName="Info" />
</TooltipHost>

在本例中，“喙”是指向图标的小三角形。“beakCurtain”是可见标注的整体背景。那么“calloutMain”就是工具提示中文本后面的背景。