Tooltip Background Color

[Lindsay-Mathieson]

I'd like to set the tooltip beak and body background color, but haven't been able to make the css for it work - any tips/suggestions please?

[vnbaaij]

Hi,

You need to target element(s) in the shadow DOM to achieve that:

fluent-tooltip::part(tooltip), fluent-tooltip::part(tooltip):after {
    background: lightgreen !important;
}

[Lindsay-Mathieson]

fluent-tooltip::part(tooltip), fluent-tooltip::part(tooltip):after {
background: lightgreen !important;
}

Thanks, I tried setting the style directly (and via class), but couldn't make it work.

@page "/"

<PageTitle>Home</PageTitle>

<FluentButton Id="bnTest">Test</FluentButton>

<FluentTooltip Anchor="bnTest"
               Style="fluent-tooltip::part(tooltip), fluent-tooltip::part(tooltip):after {background: lightgreen !important;}"
               Visible="true"
               UseTooltipService="true">
    Remark required
</FluentTooltip>

[dvoituron]

You cannot use ::part in the style attribute.

You have to use a CSS file or a style tag:

<style>
fluent-tooltip::part(tooltip), fluent-tooltip::part(tooltip):after {
    background: lightgreen !important;
}
</style>

[Lindsay-Mathieson]

Thanks! That did it for all the tooltips on the page

Is there anyway I can apply it to individual tooltips? via class or somesuch?

[vnbaaij]

Yes. Assign a class to the tooltip and use that one in the css style to select the one you want to target

[Lindsay-Mathieson]

Thankyou! Getting a better handle on css now