background color for TooltipHost in fluent-ui

Question

Can I apply background color to the tooltip when using TooltipHost in fluent-ui? I tried

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

but it did not change the color.

Thank you

Answer 1

The TooltipHost is just a wrapper around an element, that should show a Tooltip, not the Tooltip itself. Hence, you need to set some styles on the Tooltip. But since the Tooltip is made up of a Callout component, you need to set the according styles on the underlying Callout component. Perhaps I missed something simpler, but this is what I needed to do in order to change the Tooltip's background color:

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

"beak" is the small triangle pointing at the Icon in this case. "beakCurtain" is the overall background of the visible callout. "calloutMain" then is the background behind the text in the Tooltip.