Customizing ToolTip Content

Telerik themes are not turned on by default in RadToolTip. In order to use the predefined Telerik styles you can define a ContentTemplate for the RadToolTip component and use the RadToolTipContentView control inside the template.

The following code example demonstrates how to set up RadToolTip to use the Telerik themes.

Example 1: Setting ToolTipContentTemplate property

XAML

    <Ellipse Width="80" Height="80" Fill="#FF1B9DDE" Stroke="#FF1B9DDE" StrokeThickness="2"
              telerik:RadToolTipService.Placement="Top"
              telerik:RadToolTipService.VerticalOffset="-10"
              telerik:RadToolTipService.ToolTipContent="RadToolTip">
        <telerik:RadToolTipService.ToolTipContentTemplate>
            <DataTemplate>
                <telerik:RadToolTipContentView>
                    <TextBlock Text="{Binding}" />
                </telerik:RadToolTipContentView>
            </DataTemplate>
        </telerik:RadToolTipService.ToolTipContentTemplate>
    </Ellipse>

Another approach that can be used for setting up the RadToolTip theming is to set the ToolTipContentTemplate property to null and then define the RadToolTipContentView control inside the ToolTipContent.

Example 2: Setting ToolTipContent property

XAML

    <Ellipse Width="80" Height="80" Fill="#FF1B9DDE" Stroke="#FF1B9DDE" StrokeThickness="2"
           telerik:RadToolTipService.Placement="Top"
           telerik:RadToolTipService.VerticalOffset="-10"
           telerik:RadToolTipService.ToolTipContentTemplate="{x:Null}">
		<telerik:RadToolTipService.ToolTipContent>
			<telerik:RadToolTipContentView>
				<TextBlock Text="RadToolTip" />
			</telerik:RadToolTipContentView>
		</telerik:RadToolTipService.ToolTipContent>
    </Ellipse>

The end result is demonstrated in the picture below:

See Also

• Getting Started