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" 然后是工具提示中文本后面的背景。

fluent-ui 中 TooltipHost 的背景颜色

background color for TooltipHost in fluent-ui

fluent-ui