Theming

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

<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

<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