Tooltips

RadTimeline supports tooltips for its items. You can specify a tooltip template and display the details of the item itself. The purpose of this topic is to show you how this can be achieved.

The tooltip is triggered by setting the ToolTipTemplate property and is used to visualize arbitrary information per data point. The user has full control over the visualization of the tooltip itself and over the information that the tooltip will display.

For the purpose we'll need a timeline, which is bound to a collection of custom objects. The objects in the data source will be used directly as values for the Timeline items as well as content for our tooltips. You can learn how to bind the Timeline from our DataBinding topic as well as the MVVM support topic.

We create a sample class with two properties - Duration of TimeSpan type and Date of DateTime type. Then set values for the properties and create a method that returns a collection of business objects. This way the Timeline will be able to display information about the currently hovered data point via the ToolTipTemplate.

• C#
• VB.NET

public class Product 
    { 
    public TimeSpan Duration { get; set; } 
    public DateTime Date { get; set; } 
 
    public static ObservableCollection<Product> GetData(int count) 
    { 
        var startDate = new DateTime(2010, 1, 1); 
        var endDate = new DateTime(2012, 2, 1); 
        Random r = new Random(); 
        ObservableCollection<Product> result = new ObservableCollection<Product>(); 
 
        for (DateTime i = startDate; i < endDate; i = i.AddMonths(1)) 
        { 
            result.Add(new Product() { Date = i, Duration = TimeSpan.FromDays(r.Next(50, 100)) }); 
        } 
 
        for (int i = 0; i < 15; i++) 
        { 
            result.Add(new Product() 
            { 
                Date = startDate.AddMonths(r.Next(0, 25)).AddDays(15) 
            }); 
        } 
 
        return result; 
    } 
} 

Public Class Product 
    Public Property Duration() As TimeSpan 
    Public Property Date As Date 
 
    Public Shared Function GetData(ByVal count As Integer) As ObservableCollection(Of Product) 
        Dim startDate = New Date(2010, 1, 1) 
        Dim endDate = New Date(2012, 2, 1) 
        Dim r As New Random() 
        Dim result As New ObservableCollection(Of Product)() 
 
        Dim i As Date = startDate 
        Do While i < endDate 
            result.Add(New Product() With {.Date = i, .Duration = TimeSpan.FromDays(r.Next(50, 100))}) 
            i = i.AddMonths(1) 
        Loop 
 
        For i As Integer = 0 To 14 
            result.Add(New Product() With {.Date = startDate.AddMonths(r.Next(0, 25)).AddDays(15)}) 
        Next i 
 
        Return result 
    End Function 
End Class 

Our ViewModel class consists of a single property - the collection of business objects that will be used as itemssource for the Timeline. In the constructor of the class call the GetData method we previously created in our Product class with as many items as you want to generate for your Timeline.

• C#
• VB.NET

public class ExampleViewModel : ViewModelBase 
{ 
    private ObservableCollection<Product> _data; 
    public ObservableCollection<Product> Data 
    { 
        get 
        { 
            return this._data; 
        } 
        set 
        { 
            if (this._data != value) 
            { 
                this._data = value; 
                this.OnPropertyChanged("Data"); 
            } 
        } 
    } 
 
    public ExampleViewModel() 
    { 
        this.Data = Product.GetData(15); 
    } 
} 

   Public Class ExampleViewModel 
       Inherits ViewModelBase 
        Private _data As ObservableCollection(Of Product) 
        Public Property Data() As ObservableCollection(Of Product) 
            Get 
                Return Me._data 
            End Get 
            Set(ByVal value As ObservableCollection(Of Product)) 
                If Me._data IsNot value Then 
                    Me._data = value 
                    Me.OnPropertyChanged("Data") 
                End If 
            End Set 
        End Property 
 
        Public Sub New() 
            Me.Data = Product.GetData(15) 
        End Sub 
   End Class 

Now we need to define our tooltip behavior and set its tooltip template. It will display the value of the hovered Timeline item.

• XAML

 <UserControl.DataContext> 
        <local:ExampleViewModel/> 
    </UserControl.DataContext> 
 
    <UserControl.Resources> 
        <local:DurationToBrushConverter x:Key="DurationToBrushConverter"/> 
 
        <DataTemplate x:Key="ToolTipTemplate"> 
            <Grid> 
                <Rectangle Margin="0" RadiusY="2" RadiusX="2" Fill="Wheat" Opacity="0.7"/> 
                <StackPanel Orientation="Horizontal" Margin="8,8,8,12"> 
                    <TextBlock FontFamily="Segoe UI" Text="Duration in days: "/> 
                    <TextBlock FontFamily="Segoe UI" Text="{Binding Duration, StringFormat={0:%d}}" 
                               Foreground="{Binding Duration, Converter={StaticResource DurationToBrushConverter}}"/> 
                    <TextBlock FontFamily="Segoe UI" Text=" and Start Date: "/> 
                    <TextBlock FontFamily="Segoe UI" Text="{Binding Date, StringFormat='d/MM/yyyy'}"/> 
                </StackPanel> 
            </Grid> 
        </DataTemplate> 
    </UserControl.Resources>   
 
    <Grid x:Name="LayoutRoot" Background="White" Height="300" Width="750"> 
        <telerik:RadTimeline Height="250" x:Name="RadTimeline1" 
                    VerticalAlignment="Top" 
                    Margin="6" 
                    PeriodStart="2011/01/01" PeriodEnd="2011/06/01" 
                    StartPath="Date" 
                    DurationPath="Duration" 
                    ToolTipTemplate="{StaticResource ToolTipTemplate}"   
                    ItemsSource="{Binding Data}"> 
            <telerik:RadTimeline.Intervals> 
                <telerik:YearInterval /> 
                <telerik:MonthInterval /> 
                <telerik:WeekInterval /> 
                <telerik:DayInterval /> 
            </telerik:RadTimeline.Intervals> 
        </telerik:RadTimeline> 
    </Grid> 

Aside from binding the Timeline, we added a binding converter. Its purpose is to show you how you may set custom foreground for the tooltip information based on condition. You may find the DurationToBrushConverter implementations in the code snippet below:

• C#
• VB.NET

public class DurationToBrushConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
        TimeSpan durationDifference = (TimeSpan)value; 
        if (durationDifference.Days == 0) 
        { 
            return new SolidColorBrush(Colors.Red); 
        } 
        if (durationDifference.Days > 70) 
        { 
            return new SolidColorBrush(Colors.Green); 
        } 
        return new SolidColorBrush(Colors.Black); 
    } 
 
    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
        throw new NotImplementedException(); 
    } 
} 

 Public Class DurationToBrushConverter 
     Implements IValueConverter 
        Public Function Convert(ByVal value As Object, ByVal targetType As Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object 
            Dim durationDifference As TimeSpan = CType(value, TimeSpan) 
            If durationDifference.Days = 0 Then 
                Return New SolidColorBrush(Colors.Red) 
            End If 
            If durationDifference.Days > 70 Then 
                Return New SolidColorBrush(Colors.Green) 
            End If 
            Return New SolidColorBrush(Colors.Black) 
        End Function 
 
        Public Function ConvertBack(ByVal value As Object, ByVal targetType As Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object 
            Throw New NotImplementedException() 
        End Function 
 End Class 

A sample tooltip can be seen below: