Global Tooltip styles

Answered

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:SciChartSurface.RenderableSeries>
    <s:FastLineRenderableSeries 
        Stroke="#ff6495ed"
        StrokeThickness="2"
        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:FastLineRenderableSeries 
        Stroke="#ffe2460c"
        StrokeThickness="2"
        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}" />
</s:SciChartSurface.RenderableSeries>

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?

Version

4.2

WPF Styling ToolTip TooltipModifier TooltipContainerStyle

w b asked 7 years ago
last edited 7 years ago

You must login to post comments

Answers (2)

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>

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

…

Does the above make sense for you?

Best regards,
Yuriy

Yuriy Zadereckiy answered 7 years ago
last edited 7 years ago

- w b
- 7 years ago
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
- 7 years ago
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 login 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}" />
    </StackPanel>
</DataTemplate>

 <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}" />
</Style>