Style Item Tooltip

[James]

Hello,

I would like to change the font of the item tool tip on a line series definition.

Do I need to provide a style for property SeriesItemTooltipStyle to achieve this? If so can you please advise how to find this style in Blend 4 so I can copy it into Visual Studio and modify - I can't seem to style a series definition or find the ItemToolTip style on the RadChart inside Blend. Or alternatively could you just please copy and paste the style for me, whatever's easiest! :)

Thanks,

James.

[Sia]

Hello James,

Here is the default style for the Tooltips in the "Office Black" theme:

<SolidColorBrush x:Key="ToolTip2DForeground" Color="Black" />
<Thickness x:Key="ToolTip2DPadding">1</Thickness>
<LinearGradientBrush x:Key="ToolTip2DBackground" EndPoint="0.5,1" StartPoint="0.5,0">
    <GradientStop Color="White" Offset="0"/>
    <GradientStop Color="#FFDEDEDE" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ToolTip2DOuterBorder" Color="Transparent" />
<Thickness x:Key="ToolTip2DOuterBorderThickness">0</Thickness>
<mscorlib:Double x:Key="ToolTip2DOuterBorderOpacity">0</mscorlib:Double>
<CornerRadius x:Key="ToolTip2DOuterCornerRadius">0</CornerRadius>
<SolidColorBrush x:Key="ToolTip2DInnerBorder" Color="#FF848484" />
<Thickness x:Key="ToolTip2DInnerBorderThickness">1</Thickness>
<CornerRadius x:Key="ToolTip2DInnerCornerRadius">3</CornerRadius>

<Style  TargetType="charting:ItemToolTip2D" >
    <Setter Property="BorderThickness" Value="{StaticResource ToolTip2DOuterBorderThickness}" />
    <Setter Property="InnerBorderThickness" Value="{StaticResource ToolTip2DInnerBorderThickness}" />
    <Setter Property="BorderBrush" Value="{StaticResource ToolTip2DOuterBorder}" />
    <Setter Property="InnerBorderBrush" Value="{StaticResource ToolTip2DInnerBorder}" />
    <Setter Property="Foreground" Value="{StaticResource ToolTip2DForeground}" />
    <Setter Property="Background" Value="{StaticResource ToolTip2DBackground}" />
    <Setter Property="BorderOpacity" Value="{StaticResource ToolTip2DOuterBorderOpacity}" />
    <Setter Property="Padding" Value="{StaticResource ToolTip2DPadding}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="charting:ItemToolTip2D">
                <charting:ClipPanel>
                    <Border x:Name="ToolTipBorder"
                BorderThickness="{TemplateBinding BorderThickness}"
                CornerRadius="{StaticResource ToolTip2DOuterCornerRadius}"
                BorderBrush="{TemplateBinding BorderBrush}"
                Opacity="{TemplateBinding BorderOpacity}">
                        <Border
                        BorderThickness="{TemplateBinding InnerBorderThickness}"
                        CornerRadius="{StaticResource ToolTip2DInnerCornerRadius}"
                        BorderBrush="{TemplateBinding InnerBorderBrush}"
                        Background="{TemplateBinding Background}"
                        Padding="{TemplateBinding Padding}">
                            <ContentControl Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" />
                        </Border>
                        <Border.Triggers>
                            <EventTrigger RoutedEvent="Border.Loaded">
                                <EventTrigger.Actions>
                                    <BeginStoryboard>
                                        <Storyboard >
                                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.6" Storyboard.TargetName="ToolTipBorder" Storyboard.TargetProperty="(UIElement.Opacity)">
                                                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                                                <SplineDoubleKeyFrame KeyTime="00:00:00.6" Value="1"/>
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger.Actions>
                            </EventTrigger>
                        </Border.Triggers>
                    </Border>
                </charting:ClipPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

In your project you can set a CustomTooltip style in your resources as follows:

xmlns:mscorlib="clr-namespace:System;assembly=mscorlib"
xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Charting"
xmlns:controls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
xmlns:charting="clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting">
   <UserControl.Resources>
        <Style x:Key="CustomTooltip" TargetType="charting:ItemToolTip2D" >
            <Setter Property="Foreground" Value="Green" />
            <Setter Property="FontSize" Value="50" />
        </Style>
    </UserControl.Resources>

and apply it in your code-behind:

series1.Definition.SeriesItemTooltipStyle = this.Resources["CustomTooltip"] as Style;

where series1 is your Line series.

Sincerely yours,
Sia
the Telerik team

[Anatoly Chekh]

Hello!

Thanks, for answer. It's almost work.
1) Foreground style doesn't apply. How I can appply foreground property?
2) How I can set brush for the tooltip? (InnerBorderBrush and OuterBorderBrush doesn't work)
3) How can I apply TextDecorations style (underline)?

Thanks, Anatoly Chekh.

[Sia]

Hi James,

You need to use the following style:

<Style x:Key="CustomTooltip" TargetType="charting:ItemToolTip2D" >
    <Setter Property="Foreground" Value="Green" />
    <Setter Property="FontSize" Value="50" />
    <Setter Property="FontStyle" Value="Italic" />
    <Setter Property="InnerBorderBrush" Value="Red" />
</Style>

Maybe you are using a different version of our controls and this causes your problem. Can you please tell us which is the version of the Telerik binaries in your application?

Try to upgrade with the latest official version and check again whether everything works as expected.

Kind regards,
Sia
the Telerik team

[Anatoly Chekh]

Hello!

It's work! Thanks.

And how about underline style and text align (by center for multiple line tooltip) - does it supported?

Thanks, Anatoly Chekh.

[Sia]

Hi Anatoly Chekh,

There is a ContentControl in the Tooltip template. That is why in your case you need to add a Textblock as its content . In that way you will be able to play with properties as TextDecorations. Here is a possible solution how to do that:

RadChart1.DefaultView.ChartArea.ItemToolTipOpening += this.ChartItemToolTipOpening;

private void ChartItemToolTipOpening(ItemToolTip2D tooltip, ItemToolTipEventArgs args)
{
    tooltip.Foreground = new SolidColorBrush(Colors.Red);

    TextBlock t = new TextBlock();
    t.TextDecorations = TextDecorations.Underline;
    t.TextWrapping = TextWrapping.Wrap;
    t.Text = "dkdoskd dksodskodsk dksodkso dks";
    t.Width = 50d;

    tooltip.Content = t;
}

Hope this helps.

Regards,
Sia
the Telerik team

[Anatoly Chekh]

Thaks. It's work fine!
Anatoly Chekh.