I closely follow step-by-step [lvChart Customizing Tooltips](https://lvcharts.net/App/examples/v1/wf/Tooltips%20and%20Legends) in trying to build a custom tooltip for LineChart points. But I get empty tooltip content. Other than using ObservableValue for ChartValues type, my code is near identical to that used in the lvChart tutorial. I am not using any MV\*\*.

Has anyone worked out the tutorial or apply custom tooltip on a LineChart?

[![LineChart and Tooltip](https://i.stack.imgur.com/fABWB.png)](https://i.stack.imgur.com/fABWB.png)

**Main.xaml**

```
<lvc:CartesianChart.DataTooltip>
    <local:MyTooltip />
</lvc:CartesianChart.DataTooltip>

```

**Main.xaml.cs**

```
MyTooltipContents = new ChartValues<MyTooltipContent>();

for (int i = 0; i < MyData.Count(); i++)
{
    MyTooltipContents.Add(new MyTooltipContent
    {
        Name = "No" + i,
        Value = "Foo"
    });     
}

var MyTooltipContentMapper = Mappers.Xy<MyTooltipContent>()
    .X((value, index) => index) 
    .Y(value => 1);          

//lets save the mapper globally
Charting.For<MyTooltipContent>(MyTooltipContentMapper);
DataContext = this;

```

**MyTooltip.xaml**

```
<UserControl x:Class="MyNamespace.MyTooltip"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:sys="clr-namespace:System;assembly=mscorlib"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:local="clr-namespace:MyNamespace"
             xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300" 
             d:DataContext="{d:DesignInstance local:MyTooltip}"
             Background="#E4555555" Padding="20 10" BorderThickness="2" BorderBrush="#555555">

    <ItemsControl ItemsSource="{Binding Data.Points}" Grid.IsSharedSizeScope="True">
        <ItemsControl.ItemTemplate>
            <DataTemplate DataType="{x:Type lvc:DataPointViewModel}">
                <Grid Margin="2">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto" SharedSizeGroup="Name"/>
                        <ColumnDefinition Width="Auto" SharedSizeGroup="Value"/>
                    </Grid.ColumnDefinitions>

                    <TextBlock Grid.Column="1" Text="{Binding ChartPoint.Instance.(local:MyTooltipContent.Name)}" 
                               Margin="5 0 0 0" VerticalAlignment="Center" Foreground="White" />

                    <TextBlock Grid.Column="2" Text="{Binding ChartPoint.Instance.(local:MyTooltipContent.Value)}" 
                               Margin="5 0 0 0" VerticalAlignment="Center" Foreground="White"/>

                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</UserControl>

```

**MyToolTip.xaml.cs**

```
public partial class MyTooltip : IChartTooltip
{
    private TooltipData _data;

    public MyTooltip()
    {
        InitializeComponent();
        DataContext = this;
    }

    public event PropertyChangedEventHandler PropertyChanged;

    public TooltipData Data
    {
        get { return _data; }
        set
        {
            _data = value;
            OnPropertyChanged("Data");
        }
    }

    public TooltipSelectionMode? SelectionMode { get; set; }

    protected virtual void OnPropertyChanged(string propertyName = null)
    {
        if (PropertyChanged != null)
            PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

```

**MyTooltipContent.cs**

```
public class MyTooltipContent
{
    public string Name { get; set; }
    public string Value { get; set; }
}

```