Class ChartTooltipSettings

Provides options to customize the tooltip.

Inheritance
System.Object
SfBaseComponent
ChartSubComponent
ChartTooltipSettings
Implements
System.IAsyncDisposable
Inherited Members
Namespace: Syncfusion.Blazor.Toolkit.Charts
Assembly: Syncfusion.Blazor.Toolkit.dll
Syntax
public class ChartTooltipSettings : ChartSubComponent, IAsyncDisposable, ISubcomponentTracker
Remarks

This component controls tooltip behavior (visibility, animations, shared/nearest tooltip modes) and appearance (fill, opacity, border, text style and templates).

Constructors

ChartTooltipSettings()

Declaration
public ChartTooltipSettings()

Properties

Border

Gets or sets an instance of ChartTooltipBorder which controls the customization of the border of the tooltip.

Declaration
public ChartTooltipBorder Border { get; set; }
Property Value
Type Description
ChartTooltipBorder

An instance of ChartTooltipBorder.
Remarks

Use this to customize the color and width of the tooltip border.

Examples
<ChartTooltipSettings Enable="true">
    <ChartTooltipBorder Width="2" Color="tomato" />
</ChartTooltipSettings>

Duration

Gets or sets the duration for the tooltip animation in milliseconds.

Declaration
public double Duration { get; set; }
Property Value
Type Description
System.Double

The animation duration in milliseconds. Default is 300.
Remarks

Effective only when EnableAnimation is true.

Examples
<ChartTooltipSettings Enable="true" Duration="600" EnableAnimation="true" />

Enable

Gets or sets a value indicating whether the tooltip is enabled.

Declaration
public bool Enable { get; set; }
Property Value
Type Description
System.Boolean

true to enable tooltip; otherwise, false. Default is false.
Remarks

When enabled, the chart displays tooltip content on interaction.

Examples
<ChartTooltipSettings Enable="true" />

EnableAnimation

Gets or sets a value indicating whether the tooltip animates while moving from one point to another.

Declaration
public bool EnableAnimation { get; set; }
Property Value
Type Description
System.Boolean

true to enable animation; otherwise, false. Default is true.
Examples
<ChartTooltipSettings Enable="true" EnableAnimation="false" />

EnableHighlight

Gets or sets a value indicating whether to enable highlighting when hovered over the point element.

Declaration
public bool EnableHighlight { get; set; }
Property Value
Type Description
System.Boolean

true to enable highlight; otherwise, false. Default is false.
Remarks

When enabled, the hovered point's series can be visually emphasized.

Examples
<ChartTooltipSettings Enable="true" EnableHighlight="true" />

EnableMarker

Gets or sets a value indicating whether to display a marker in the tooltip.

Declaration
public bool EnableMarker { get; set; }
Property Value
Type Description
System.Boolean

true to display marker; otherwise, false. Default is true.
Remarks

If the series marker is not enabled, a circle-shaped marker is rendered by default.

Examples
<ChartTooltipSettings Enable="true" EnableMarker="false" />

EnableTextWrap

Gets or sets a value indicating whether to wrap the tooltip text based on the available space.

Declaration
public bool EnableTextWrap { get; set; }
Property Value
Type Description
System.Boolean

true to enable text wrap; otherwise, false. Default is false.
Examples
<ChartTooltipSettings Enable="true" EnableTextWrap="true" />

FadeOutDuration

Gets or sets the duration for fading out the tooltip.

Declaration
public double FadeOutDuration { get; set; }
Property Value
Type Description
System.Double

The fade-out duration in milliseconds. Default is 1000.
Examples
<ChartTooltipSettings Enable="true" FadeOutDuration="0" />

Fill

Gets or sets the fill color of the tooltip background.

Declaration
public string Fill { get; set; }
Property Value
Type Description
System.String

CSS color string for the tooltip background fill. Default is theme-specific (e.g., #000816 for Fluent).
Examples
<ChartTooltipSettings Enable="true" Fill="#0b1220" />

Format

Gets or sets the format for the tooltip content.

Declaration
public string Format { get; set; }
Property Value
Type Description
System.String

Format string for tooltip text. Default is empty string (auto).
Remarks

Use tokens like ${series.name}, ${point.x}, ${point.y} to include series/point data.

Examples
<ChartTooltipSettings Enable="true" Format="<b>${series.name}</b> : ${point.y}" />

Header

Gets or sets the header text for the tooltip.

Declaration
public string Header { get; set; }
Property Value
Type Description
System.String

The tooltip header text. Default is empty.
Examples
<ChartTooltipSettings Enable="true" Header="Sales (USD)" />

Opacity

Gets or sets the opacity of the tooltip.

Declaration
public double Opacity { get; set; }
Property Value
Type Description
System.Double

A System.Double representing tooltip opacity. Default is 0.75.
Examples
<ChartTooltipSettings Enable="true" Opacity="0.85" />

Shared

Gets or sets a value indicating whether a single tooltip should be displayed with shared values of multiple series.

Declaration
public bool Shared { get; set; }
Property Value
Type Description
System.Boolean

true to show shared tooltip; otherwise, false. Default is false.
Examples
<ChartTooltipSettings Enable="true" Shared="true" />

ShowHeaderLine

Gets or sets a value that determines whether the header line is displayed in the tooltip.

Declaration
public bool ShowHeaderLine { get; set; }
Property Value
Type Description
System.Boolean

true to show header line; otherwise, false. Default is true.
Examples
<ChartTooltipSettings Enable="true" ShowHeaderLine="false" Header="Gross Margin" />

ShowNearestPoint

Gets or sets a value indicating whether the values of the nearest points for all visible series should be shown in a shared tooltip.

Declaration
public bool ShowNearestPoint { get; set; }
Property Value
Type Description
System.Boolean

true to show the nearest points; otherwise, false. Default is true.
Remarks

Applicable only when Shared is true.

Examples
<ChartTooltipSettings Enable="true" Shared="true" ShowNearestPoint="true" />

ShowNearestTooltip

Gets or sets a value that determines whether tooltips are displayed for only the nearest data point to the cursor.

Declaration
public bool ShowNearestTooltip { get; set; }
Property Value
Type Description
System.Boolean

true to show only the nearest tooltip; otherwise, false. Default is false.
Examples
<ChartTooltipSettings Enable="true" ShowNearestTooltip="true" />

Template

Gets or sets a custom template to format the tooltip content.

Declaration
public RenderFragment<object> Template { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.RenderFragment<System.Object>

A template (Microsoft.AspNetCore.Components.RenderFragment<>) used to render custom tooltip content, or null for default.
Remarks

Template context is a tooltip info object (single or list based on Shared).

Examples
<ChartTooltipSettings Enable="true" Shared="true">
    <Template>
        @{
            var items = context as List<ChartTooltipInfo>;
        }
        <div style="padding:4px 8px">
            <div><b>@items[0].X</b></div>
            @foreach (var i in items)
            {
                <div>@i.Series.Name : @i.Y</div>
            }
        </div>
    </Template>
</ChartTooltipSettings>

TextStyle

Gets or sets an instance of ChartTooltipTextStyle which controls the customization of the text style of the tooltip.

Declaration
public ChartTooltipTextStyle TextStyle { get; set; }
Property Value
Type Description
ChartTooltipTextStyle

The text style settings for the tooltip.
Examples
<ChartTooltipSettings Enable="true">
    <ChartTooltipTextStyle Size="13px" FontFamily="Inter, Roboto, Arial" Color="#e5e7eb" FontWeight="600" />
</ChartTooltipSettings>

Implements

System.IAsyncDisposable