Thursday, July 11, 2013

#860 – Making a Tooltip Partially Transparent

Inline image 1

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.

<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>


QR: Inline image 2