#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">
                <ToolTip Background="#D5F0F0FF">
                        <TextBlock Text="Reading Suggestion" FontWeight="Bold"/>
                        <TextBlock Text="Charles Dickens" Margin="5"/>

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


About Sean
Software developer in the Twin Cities area, passionate about software development and sailing.

One Response to #860 – Making a Tooltip Partially Transparent

  1. Pingback: Dew Drop – July 10, 2013 (#1,582) | Alvin Ashcraft's Morning Dew

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: