цвет фона для TooltipHost в fluent-ui

Question

Могу ли я применить цвет фона к всплывающей подсказке при использовании TooltipHost в fluent-ui? Я старался

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

но это не изменило цвет.

Спасибо

Answer 1

TooltipHost - это просто оболочка вокруг элемента, которая должна отображать всплывающую подсказку, а не саму подсказку. Следовательно, вам необходимо установить некоторые стили во всплывающей подсказке. Но поскольку всплывающая подсказка состоит из компонента Callout, вам необходимо установить соответствующие стили для базового компонента Callout. Возможно, я пропустил что-то попроще, но это то, что мне нужно было сделать, чтобы изменить цвет фона всплывающей подсказки:

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

"клюв" - это маленький треугольник, указывающий на иконку в данном случае. beakCurtain - это общий фон видимой выноски. calloutMain - это фон за текстом во всплывающей подсказке.