问fluent-ui中TooltipHost的背景色
EN

Stack Overflow用户

提问于 2020-07-17 01:57:13

回答 1查看 651关注 0票数 1

在fluent-ui中使用TooltipHost时，是否可以将背景色应用于工具提示？我试过了

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

但它并没有改变颜色。

谢谢

fluent-ui

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-07-20 17:21:25

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

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

在本例中，"beak“是指向图标的小三角形。"beakCurtain“是可见标注的整体背景。"calloutMain“则是工具提示中文本背后的背景。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62940791

复制

相似问题

问fluent-ui中TooltipHost的背景色
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问fluent-ui中TooltipHost的背景色EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问fluent-ui中TooltipHost的背景色
EN