Forums Ignite UI for Blazor
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Richard Carlin
1175
How to reference the item under the mouse in a custom tooltip
posted

When I am building a custom tooltip in the column series (or any series) how do i get a reference to the data associated with the point under the mouse

<ColumnSeries Name="@series.Name"
                                  XAxisName="@series.XAxisName"
                                  YAxisName="@series.YAxisName"
                                  MarkerType="MarkerType.None"
                                  Brush="@series.Brush"
                                  Outline="@series.Brush"
                                  Thickness="@series.Thickness"
                                  DataSource="@series.SeriesData"
                                  ValueMemberPath="@series.ValueMemberPath"
                                  Title="@series.Title"
                                  ShowDefaultTooltip="true"
                                  MouseOverEnabled="true">
                        <TooltipTemplate>
                            <div style="width: 200px; height: 70px;">
                                <span>How do I reference the data object under the mouse</span>
                            </div>
                        </TooltipTemplate>

  • 28945
    Offline posted

    Hello, 

    To access the item you can use this code and use the Context object:


    <TooltipTemplate>
                @{ var data = context.Item as FilmFranchiseInfo;
                <span>
                    @data.Franchise
                </span> }
 </TooltipTemplate>

    Now, an alternate way to write a TooltipTemplate is to use SeriesMouseEnterScript event and use JS to write your own template. 

    tooltip-template.zip