Pre loader

Global Tooltip styles

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums


I would like to apply a custom style to all tooltips, but I can’t seem to figure out how to do so. I’ve followed the custom tooltip example, but find that applying the same style to all series becomes very verbose when we have many series on the same chart. From the example:

        s:CursorModifier.TooltipTemplate="{StaticResource CursorTooltipTemplate1}"
        s:RolloverModifier.TooltipContainerStyle="{StaticResource TooltipStyle1}"
        s:RolloverModifier.TooltipTemplate="{StaticResource RolloverTooltipTemplate1}"
        s:TooltipModifier.TooltipContainerStyle="{StaticResource TooltipStyle1}"
        s:TooltipModifier.TooltipTemplate="{StaticResource TooltipTemplate1}"
        s:VerticalSliceModifier.TooltipContainerStyle="{StaticResource TooltipStyle1}"
        s:VerticalSliceModifier.TooltipTemplate="{StaticResource VerticalSliceTooltipTemplate1}" />
        s:CursorModifier.TooltipTemplate="{StaticResource CursorTooltipTemplate2}"
        s:RolloverModifier.TooltipContainerStyle="{StaticResource TooltipStyle2}"
        s:RolloverModifier.TooltipTemplate="{StaticResource RolloverTooltipTemplate2}"
        s:TooltipModifier.TooltipContainerStyle="{StaticResource TooltipStyle2}"
        s:TooltipModifier.TooltipTemplate="{StaticResource TooltipTemplate2}"
        s:VerticalSliceModifier.TooltipContainerStyle="{StaticResource TooltipStyle2}"
        s:VerticalSliceModifier.TooltipTemplate="{StaticResource VerticalSliceTooltipTemplate2}" />

My target style is the same for all types of series, so I don’t need to customize them beyond overriding the default style. I’ve tried removing the “x:key” attribute from my custom tooltip style (to make it apply to all unstyled tooltips), but it doesn’t work as I had hoped. So I’m guessing that they’re being styled in some way at lower levels that prevent this from working. Is there a way to style the tooltips globally or is the method shown in this example the best approach?

  • You must to post comments
Great Answer

Hi there,

Thanks for your question. You could do this using implicit styles. Set the tooltip properties in a style for BaseRenderableSeries, then base on it implicit styles for all the RenderableSeries types you use:

<Style x:Key="DefaultRenderableSeriesStyle" TargetType="s:BaseRenderableSeries">
    <Setter Property="s:TooltipModifier.TooltipTemplate" Value="{StaticResource TooltipLabelTemplate}" />

<Style BasedOn="{StaticResource DefaultRenderableSeriesStyle}" TargetType="s:FastLineRenderableSeries" />
<Style BasedOn="{StaticResource DefaultRenderableSeriesStyle}" TargetType="s:FastColumnRenderableSeries" />

Does the above make sense for you?

Best regards,

  • w b
    This approach doesn’t quite work for our application, since we’re customizing the style of each RenderableSeries slightly differently (so the implicit styles are overridden by the custom styles). But this does solve the actual question that I asked. And it did help me to realize that I can set the TooltipTemplate styles inside of the style definition for each RenderableSeries (not sure why I didn’t think of this before). For anyone interested, here’s exactly what we did: (edit: it looks like code blocks aren’t supported in comments, so see my answer below for the actual code). Also, I noticed that the code sample you provided uses two different namespace definitions: r:BaseRenderableSeries and c:TooltipModifier. Was this done for a reason, or is it just a copy/paste issue?
  • Yuriy Zadereckiy
    Concerning the different namespaces, it is kind of copy/paste issue. The markup snippet was intended to be more like pseudocode just to demonstrate the idea. Let me correct it, actually. Thanks for pointing it out to me.
  • You must to post comments

For anyone interested, here’s exactly what we did to solve this issue:

<DataTemplate x:Key="TooltipTemplate" DataType="s:SeriesInfo">
    <StackPanel Orientation="Horizontal">
        <TextBlock Style="{StaticResource HintDataItemsStyle}" Text="{Binding SeriesName, StringFormat='{}{0}: '}" />
        <TextBlock Style="{StaticResource HintDataItemsStyle}" Text="{Binding FormattedYValue}" />

 <Style x:Key="LineSeriesStyle" TargetType="s:FastLineRenderableSeries">
    <Setter Property="Stroke" Value="#FF4083B7"/>
    <Setter Property="StrokeThickness" Value="2"/>

    <!-- other property setters -->

    <Setter Property="s:TooltipModifier.TooltipTemplate" Value="{StaticResource TooltipTemplate}" />
    <Setter Property="s:VerticalSliceModifier.TooltipTemplate" Value="{StaticResource TooltipTemplate}" />
  • Yuriy Zadereckiy
    Thanks for sharing your solution! I’m sure it will benefit others.
  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.