You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Tooltip uses a Callout to render the popup, but ITooltipStyles doesn't seem to contain a subComponentStyles that allows you to set styles for its callout. Is it possible to set a Tooltip-specific style for Callout in the theme object, so I don't have to apply the same styles everywhere I use Tooltip?
Specifically I want to configure the background color for the tooltip's beak/beakCurtain, and padding etc. (Not all Callouts...just the ones used for Tooltips.)
Currently it seems like I have to do:
// In my Theme...
components: {Tooltip: {styles: ({ theme }: ITooltipStyleProps): Partial<ITooltipStyles>=>({root: {background: theme.palette.neutralDark},content: {background: theme.palette.neutralDark},}),},}// And wherever I want to use a tooltip...<TooltipHostcalloutProps={{styles: {beak: {background: theme.palette.neutralDark},beakCurtain: {background: theme.palette.neutralDark},calloutMain: {background: theme.palette.neutralDark},},}}
...
/>
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Filed an issue to track: #18408
Tooltip uses a Callout to render the popup, but
ITooltipStyles
doesn't seem to contain asubComponentStyles
that allows you to set styles for its callout. Is it possible to set a Tooltip-specific style for Callout in the theme object, so I don't have to apply the same styles everywhere I use Tooltip?Specifically I want to configure the background color for the tooltip's beak/beakCurtain, and padding etc. (Not all Callouts...just the ones used for Tooltips.)
Currently it seems like I have to do:
Beta Was this translation helpful? Give feedback.
All reactions