Adding a ToolTip to a custom SeriesItemLabel

[David]

Hi,

I'm creating a chart that is based off the MeteoChart example. Specifically, I'm using the same concepts as the SplineLabelStyle in the MeteoChart to display custom icons overriding the default item label.

The MeteoChart has the following XAML to style the SeriesItemLabel with a custom control template that contains custom icons:

<Style x:Key="SplineLabelStyle" TargetType="charting:SeriesItemLabel">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="charting:SeriesItemLabel">
                <Canvas>
                    <Border x:Name="PART_TextContainer">
                        <Image x:Name="PART_Image"
                              Source="{Binding DataItem.WeatherImageSource}" />
                    </Border>
                </Canvas>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

What I'd like to do is add a tooltip to this image to display more information, ie:

<Style x:Key="SplineLabelStyle" TargetType="charting:SeriesItemLabel">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="charting:SeriesItemLabel">
                <Canvas>
                    <Border x:Name="PART_TextContainer">
                        <Image x:Name="PART_Image"
                              Source="{Binding DataItem.WeatherImageSource}"
                              ToolTip="{Binding DataItem.WeatherConditions}" />
                    </Border>
                </Canvas>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

The problem is that the above XAML doesn't work. While the example runs, tooltips are not displayed when hovering over the icon. I've tried shifting the tooltip to the canvas instead and even tried displaying fixed text as the tooltip, however none of these alternatives get tooltips to display.

I would like to display the tooltip on the customized item label because:

1. these labels are easier targets to hover over instead of point marks,
2. the labels are displayed in a different location to the point mark, and finally
3. I'm actually hiding the point mark in my actual scenario (I'm just displaying the icons).

How can I define tooltips for custom item labels?

Alternatively, how can I customize the PointMarkItemStyle to display custom icons (and then I can use the default item tooltip provided).

Kind regards,
Dave.

[Evgenia]

Hi David,

Both approaches can be achieved with our RadChart. For example:
1. You should set the SeriesItemLabel to be HitTestVisible in your style. The add ToolTipService.Tooltip for the Image in the style:
 

<Style x:Key="SplineLabelStyle" TargetType="charting:SeriesItemLabel">
            <Setter Property="IsHitTestVisible" Value="True"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="charting:SeriesItemLabel">
                        <Canvas>
                            <Border x:Name="PART_TextContainer">
                                <Image x:Name="PART_Image"
                                      Source="{Binding DataItem.WeatherImageSource}" ToolTipService.ToolTip="{TemplateBinding Content}"/>
                            </Border>
                        </Canvas>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

2. You can set custom image as PointMark by retemplating the PointMarkItemStyle as described here. You may use the following template for your case:

<Style x:Key="PointMarkStyle" TargetType="charting:PointMark">
          <Setter Property="Template">
              <Setter.Value>
                  <ControlTemplate TargetType="charting:PointMark">
                      <Canvas>
                          <Path x:Name="PART_PointMarkPath"
                      Stretch="Fill" Width="40" Height="40"
                      Canvas.Left="{TemplateBinding PointMarkCanvasLeft}"
                      Canvas.Top="{TemplateBinding PointMarkCanvasTop}"
                         Data="M5.5,45.5 L60.5,45.5 L60.5,95.5 L5.5,95.5z">
                              <Path.Fill>
                                      <ImageBrush x:Name="PART_Image"
                                    ImageSource="{Binding DataItem.WeatherImageSource}" />
                              </Path.Fill>
                          </Path>
                      </Canvas>
                  </ControlTemplate>
              </Setter.Value>
          </Setter>
      </Style>

Now when turning on the ShowItemToolTips property of the series you will be able to have whatever tooltip you want.

Happy holidays,
Evgenia
the Telerik team

[David]

Hi Evgenia,

Thanks for your reply with clear code examples. I've successfully added tooltips using method 1, adding the IsHitTestVisible=True property and setting the ToolTip in the image control. Great work!

Kind regards,
Dave.

[Brian]

I am trying to add tooltips to my SeriesItemLabel style using method 1.  My chart is a bar chart.  I would like the tool tip for the SeriesItemLabel to be the same as the tool tip for the bar.  I have been able to get the content of the SeriesItemLabel to show up as its tool tip using this style:

<Setter Property="IsHitTestVisible" Value="True"/>
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <TextBlock TextAlignment="Center" Text="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}" ToolTipService.ToolTip="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}"/>
                    </DataTemplate>
                </Setter.Value>
            </Setter>

I don't know how to alter the binding statement for the ToolTip so that it shows the same tool tip that I am using for the bar.  I am currently using ItemMappings to set the bar's tool tip to a property on my view model for the bar.

Thanks,
Brian

[Evgenia]

Hello Brian,

You may bind to the same property of your view model, the bar has bound to using the DataItem property as shown in my previous post:
 

<Style x:Key="SplineLabelStyle" TargetType="charting:SeriesItemLabel">
            <Setter Property="IsHitTestVisible" Value="True"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="charting:SeriesItemLabel">
                        <Canvas>
                            <Border x:Name="PART_TextContainer">
                                <Image x:Name="PART_Image"
                                      Source="{Binding DataItem.WeatherImageSource}" ToolTipService.ToolTip="{TemplateBinding Content}"/>
                            </Border>
                        </Canvas>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

It allows that you obtain the value from the underlying DataPoint object's properties without any additional bindings.

Greetings,
Evgenia
the Telerik team