Tooltip on Sparkline

[David]

Is it possible for the sparkline points to have unique tooltips?  I'd like the user to be able to hover over the sparkline and see XValue and YValue in a tooltip.

 

Thanks,

[Petar Marchev]

Hi David,

We have not implemented the tooltip to be a built-in feature for the sparklines, because we have created them with the purpose of being used in a GridView or a ListBox. This being the case, there would be so many sparklines and it wouldn't make much sense for the items to have a unique tooltip because the reader would have to spend too much time checking out the tooltips of all these items.

Any way, even though the tooltips do not come out-of-the-box, you should be able to set a tooltip content and a tooltip template for the items of a sparkline. This can be done via an implicit style. I have attached a small project demonstrating the approach for the column sparkline. Let us know if you need more information.

Regards,
Petar Marchev
Telerik

 

 

[Joseph Lam]

How can I get tooltip for every item marker of a RadLinearSparkline inside a RadTimeBar?

[Peshito]

Hello,

You use the MarkerStyle property of the RadLInearSparkline control in order to apply the implicit style suggested earlier by Petar Marchev.

For instance:

<FrameworkElement.Resources>
        <DataTemplate x:Key="TooltipTemplate">
            <Border Background="#88FFFFFF">
                <StackPanel>
                    <TextBlock Text="{Binding DataItem.Name}" />
                    <TextBlock Text="{Binding DataItem.YVal}" />
                    <TextBlock Text="{Binding DataItem.XVal}" />
                </StackPanel>
            </Border>
        </DataTemplate>
    </FrameworkElement.Resources>
    <Grid>
        <telerik:RadLinearSparkline MinYValue="0"
                                    MaxYValue="10"
                                    AutoRange="False"
                                    XValuePath="XVal"
                                    YValuePath="YVal"
                                    ItemsSource="{Binding}"
                                    MarkersBrush="Red"
                                    ShowMarkers="True"
                                    >
            <telerik:RadLinearSparkline.MarkersStyle>
                <Style>
                    <Setter Property="telerik:RadToolTipService.ToolTipContent" Value="{Binding}" />
                    <Setter Property="telerik:RadToolTipService.ToolTipContentTemplate" Value="{StaticResource TooltipTemplate}" />
                </Style>
            </telerik:RadLinearSparkline.MarkersStyle>
        </telerik:RadLinearSparkline>
    </Grid>

Hope this helps.

Regards,
Peshito
Telerik

[Bryan]

Community!

 

Is there any update on this one since above methods doesn't seem to work anymore.

Neither for MarkerStyle or IndicatorStyle.

 

Thank you in advance.

[Dinko | Tech Support Engineer]

Hello Bryan,

We have tested the approach mentioned in the Petar reply with the latest version of our controls and everything is working as expected. Basically, when we hover the indicator item a tooltip appear. We have attached to this reply the project we used to test this scenario. 

Give this project a try and let us know if we are missing some additional code in order to reproduce this behavior.

Regards,
Dinko
Progress Telerik

[Bryan]

Thank you tons for your sample.

 

I figured the issue. Basically markers were sliding away.

Not sure if its bug or by desing.

 

To reproduce that behaviour in your sample set RadLinearSparkline Height to 40 (smaller than you are setting for MarkersStyle).

Then if you'll set it to 10 they'll disappear completely.

 

Thanks again.

[Bryan]

Just a heads up.

 

Found another occurence where your sample won't work at all.

Just convert it to use implicit  styles (I tried on Windows8 one).

 

In that case your initial sample won't show any markers.

[Dinko | Tech Support Engineer]

Hello Bryan,

I have check your scenario and the IndicatorItems still appears. Basically, if you want to change the Ellipse size which represents the IndicatorItem you can set custom ControlTemplate to the Template property of the IndicatorItem. This approach is demonstrated in the attached project.

As for the case in your last scenario, keep in mind that when you are working with our NoXaml binaries in combination and Implicit Style your custom Styles that target our controls should be based on their default styles. You can do this by setting the BasedOn property of the custom Style. You can find more information in our Styling the Controls help article in our documentation. In your case, the BasedOn property should be set to IndicatorItemStyle. This approach is demonstrated in the attached project.

Regards,
Dinko
Progress Telerik

[Bryan]

Both suggestions worked like a charm!

Many thanks.