#860 – Making a Tooltip Partially Transparent

You’ll normally want your tooltips fully opaque so that the user can easily read the content on the tooltip. ¬†However, there might be cases when you’d like the tooltip at least partially transparent, to hint at content behind the tooltip.

To make a tooltip partially transparent, you can set its Background property to a color that includes an alpha value indicating transparency.

The alpha component of a color value ranges from 0-255 (00-FF), with a value of 0 representing a fully transparent color and 255 representing a fully opaque color.

In the example below, we set the alpha portion of the color value to D5, which is slightly transparent.

        <Button Content="Read a Book"
                Padding="10,5" HorizontalAlignment="Center">
            <Button.ToolTip>
                <ToolTip Background="#D5F0F0FF">
                    <StackPanel>
                        <TextBlock Text="Reading Suggestion" FontWeight="Bold"/>
                        <TextBlock Text="Charles Dickens" Margin="5"/>
                    </StackPanel>
                </ToolTip>
            </Button.ToolTip>
        </Button>

When the tooltip appears, you can see through it to the button behind it.
860-001