Tooltip on Sparkline

10 posts, 0 answers
  1. David
    David avatar
    2 posts
    Member since:
    Sep 2011

    Posted 08 Apr 2015 Link to this post

    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,

  2. Petar Marchev
    Admin
    Petar Marchev avatar
    996 posts

    Posted 13 Apr 2015 Link to this post

    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
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  3. Joseph Lam
    Joseph Lam avatar
    10 posts
    Member since:
    Jan 2010

    Posted 01 Oct 2015 in reply to Petar Marchev Link to this post

    How can I get tooltip for every item marker of a RadLinearSparkline inside a RadTimeBar?
  4. Peshito
    Admin
    Peshito avatar
    520 posts

    Posted 06 Oct 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Bryan
    Bryan avatar
    4 posts
    Member since:
    Apr 2011

    Posted 25 May Link to this post

    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.

  6. Dinko
    Admin
    Dinko avatar
    363 posts

    Posted 29 May Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  7. Bryan
    Bryan avatar
    4 posts
    Member since:
    Apr 2011

    Posted 29 May in reply to Dinko Link to this post

    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.

  8. Bryan
    Bryan avatar
    4 posts
    Member since:
    Apr 2011

    Posted 31 May Link to this post

    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.

  9. Dinko
    Admin
    Dinko avatar
    363 posts

    Posted 01 Jun Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  10. Bryan
    Bryan avatar
    4 posts
    Member since:
    Apr 2011

    Posted 01 Jun in reply to Dinko Link to this post

    Both suggestions worked like a charm!

    Many thanks.

Back to Top