Skip to content

tool-tip.md

Latest commit

 

History

History
372 lines (277 loc) · 12.1 KB

tool-tip.md

File metadata and controls

372 lines (277 loc) · 12.1 KB
layout post
title Tooltip in
description Learn here all about Tooltip in Syncfusion
platform ej2-javascript
control Tooltip
publishingplatform
documentation ug
domainurl

Tooltip in ##Platform_Name## Chart control

The chart displays detailed information about a data point through a tooltip when the mouse pointer moves over the point.

Default tooltip

By default, the tooltip is not visible. You can enable the tooltip by setting the enable property to true and by injecting Tooltip module using Chart.Inject(Tooltip).

{% if page.publishingplatform == "typescript" %}

{% tabs %} {% highlight ts tabtitle="index.ts" %} {% include code-snippet/chart/user-interaction-cs18/index.ts %} {% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/chart/user-interaction-cs18/index.html %} {% endhighlight %} {% endtabs %}

{% previewsample "page.domainurl/code-snippet/chart/user-interaction-cs18" %}

{% elsif page.publishingplatform == "javascript" %}

{% tabs %} {% highlight js tabtitle="index.js" %} {% include code-snippet/chart/user-interaction-cs18/index.js %} {% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/chart/user-interaction-cs18/index.html %} {% endhighlight %} {% endtabs %}

{% previewsample "page.domainurl/code-snippet/chart/user-interaction-cs18" %} {% endif %}

Fixed tooltip

By default, the tooltip tracks the mouse movement. You can render the tooltip at a fixed position by using the location property.

{% if page.publishingplatform == "typescript" %}

{% tabs %} {% highlight ts tabtitle="index.ts" %} {% include code-snippet/chart/user-interaction-cs49/index.ts %} {% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/chart/user-interaction-cs49/index.html %} {% endhighlight %} {% endtabs %}

{% previewsample "page.domainurl/code-snippet/chart/user-interaction-cs49" %}

{% elsif page.publishingplatform == "javascript" %}

{% tabs %} {% highlight js tabtitle="index.js" %} {% include code-snippet/chart/user-interaction-cs49/index.js %} {% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/chart/user-interaction-cs49/index.html %} {% endhighlight %} {% endtabs %}

{% previewsample "page.domainurl/code-snippet/chart/user-interaction-cs49" %} {% endif %}

Format the tooltip

By default, the tooltip displays the x- and y-values of a data point. Additional information can be shown by specifying a custom format. For example, the format ${series.name} ${point.x} displays the series name along with the x-value of the data point.

{% if page.publishingplatform == "typescript" %}

{% tabs %} {% highlight ts tabtitle="index.ts" %} {% include code-snippet/chart/user-interaction-cs19/index.ts %} {% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/chart/user-interaction-cs19/index.html %} {% endhighlight %} {% endtabs %}

{% previewsample "page.domainurl/code-snippet/chart/user-interaction-cs19" %}

{% elsif page.publishingplatform == "javascript" %}

{% tabs %} {% highlight js tabtitle="index.js" %} {% include code-snippet/chart/user-interaction-cs19/index.js %} {% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/chart/user-interaction-cs19/index.html %} {% endhighlight %} {% endtabs %}

{% previewsample "page.domainurl/code-snippet/chart/user-interaction-cs19" %} {% endif %}

Tooltip template

Custom HTML content can be rendered in the tooltip by using the template property. The ${x} and ${y} placeholders can be used within the template to display the x- and y-values of the corresponding data point.

{% if page.publishingplatform == "typescript" %}

{% tabs %} {% highlight ts tabtitle="index.ts" %} {% include code-snippet/chart/user-interaction-cs20/index.ts %} {% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/chart/user-interaction-cs20/index.html %} {% endhighlight %} {% endtabs %}

{% previewsample "page.domainurl/code-snippet/chart/user-interaction-cs20" %}

{% elsif page.publishingplatform == "javascript" %}

{% tabs %} {% highlight js tabtitle="index.js" %} {% include code-snippet/chart/user-interaction-cs20/index.js %} {% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/chart/user-interaction-cs20/index.html %} {% endhighlight %} {% endtabs %}

{% previewsample "page.domainurl/code-snippet/chart/user-interaction-cs20" %} {% endif %}

Enable highlight

By setting the enableHighlight property to true, all points in the hovered series are highlighted while the remaining points are dimmed. This behavior improves focus and readability during data analysis.

{% if page.publishingplatform == "typescript" %}

{% tabs %} {% highlight ts tabtitle="index.ts" %} {% include code-snippet/chart/user-interaction-cs52/index.ts %} {% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/chart/user-interaction-cs52/index.html %} {% endhighlight %} {% endtabs %}

{% previewsample "page.domainurl/code-snippet/chart/user-interaction-cs52" %}

{% elsif page.publishingplatform == "javascript" %}

{% tabs %} {% highlight js tabtitle="index.js" %} {% include code-snippet/chart/user-interaction-cs52/index.js %} {% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/chart/user-interaction-cs52/index.html %} {% endhighlight %} {% endtabs %}

{% previewsample "page.domainurl/code-snippet/chart/user-interaction-cs52" %} {% endif %}

Customize the appearance of tooltip

The appearance of the tooltip can be customized by using the following properties:

  • fill to set the background color
  • border to configure the tooltip border
  • textStyle to customize the tooltip text style

The highlightColor property is used to change the color of a data point when it is highlighted during tooltip interaction.

{% if page.publishingplatform == "typescript" %}

{% tabs %} {% highlight ts tabtitle="index.ts" %} {% include code-snippet/chart/user-interaction-cs21/index.ts %} {% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/chart/user-interaction-cs21/index.html %} {% endhighlight %} {% endtabs %}

{% previewsample "page.domainurl/code-snippet/chart/user-interaction-cs21" %}

{% elsif page.publishingplatform == "javascript" %}

{% tabs %} {% highlight js tabtitle="index.js" %} {% include code-snippet/chart/user-interaction-cs21/index.js %} {% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/chart/user-interaction-cs21/index.html %} {% endhighlight %} {% endtabs %}

{% previewsample "page.domainurl/code-snippet/chart/user-interaction-cs21" %} {% endif %}

Closest tooltip

The showNearestTooltip property displays the tooltip for the data point nearest to the pointer, even when the pointer is not directly positioned over the point.

{% if page.publishingplatform == "typescript" %}

{% tabs %} {% highlight ts tabtitle="index.ts" %} {% include code-snippet/chart/user-interaction-cs55/index.ts %} {% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/chart/user-interaction-cs55/index.html %} {% endhighlight %} {% endtabs %}

{% previewsample "page.domainurl/code-snippet/chart/user-interaction-cs55" %}

{% elsif page.publishingplatform == "javascript" %}

{% tabs %} {% highlight js tabtitle="index.js" %} {% include code-snippet/chart/user-interaction-cs55/index.js %} {% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/chart/user-interaction-cs55/index.html %} {% endhighlight %} {% endtabs %}

{% previewsample "page.domainurl/code-snippet/chart/user-interaction-cs55" %} {% endif %}

Split tooltip

The split tooltip displays a separate tooltip for each series at the same data point, making it easier to compare values across multiple series.

Enable this feature by setting the split property to true:

<<<<<<< HEAD

a475736541c1931072a7aa7a11369f14a9f147a4

tooltip: { 
    enable: true, 
    split: true 
}

{% if page.publishingplatform == "typescript" %}

{% tabs %} {% highlight ts tabtitle="index.ts" %} {% include code-snippet/chart/tooltip-split/index.ts %} {% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/chart/tooltip-split/index.html %} {% endhighlight %} {% endtabs %}

{% previewsample "page.domainurl/code-snippet/chart/tooltip-split" %}

{% elsif page.publishingplatform == "javascript" %}

{% tabs %} {% highlight js tabtitle="index.js" %} {% include code-snippet/chart/tooltip-split/index.js %} {% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/chart/tooltip-split/index.html %} {% endhighlight %} {% endtabs %}

{% previewsample "page.domainurl/code-snippet/chart/tooltip-split" %} {% endif %}

Follow pointer

The follow pointer feature enables the tooltip to follow the mouse cursor or touch pointer as users interact with the chart, keeping the tooltip near the point of interaction.

Enable this feature by setting the followPointer property to true:

tooltip: { 
	enable: true, 
	followPointer: true 
}

{% if page.publishingplatform == "typescript" %}

{% tabs %} {% highlight ts tabtitle="index.ts" %} {% include code-snippet/chart/tooltip-followPointer/index.ts %} {% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/chart/tooltip-followPointer/index.html %} {% endhighlight %} {% endtabs %}

{% previewsample "page.domainurl/code-snippet/chart/tooltip-followPointer" %}

{% elsif page.publishingplatform == "javascript" %}

{% tabs %} {% highlight js tabtitle="index.js" %} {% include code-snippet/chart/tooltip-followPointer/index.js %} {% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/chart/tooltip-followPointer/index.html %} {% endhighlight %} {% endtabs %}

{% previewsample "page.domainurl/code-snippet/chart/tooltip-followPointer" %} {% endif %}

Tooltip distance

The tooltip distance property controls the spacing between the tooltip and the mouse pointer or target data point. This prevents the tooltip from overlapping with the cursor or nearby chart elements, improving readability.

Set the distance property to specify the gap in pixels:

tooltip: { 
	enable: true, 
	distance: 25 
}

{% if page.publishingplatform == "typescript" %}

{% tabs %} {% highlight ts tabtitle="index.ts" %} {% include code-snippet/chart/tooltip-distance/index.ts %} {% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/chart/tooltip-distance/index.html %} {% endhighlight %} {% endtabs %}

{% previewsample "page.domainurl/code-snippet/chart/tooltip-distance" %}

{% elsif page.publishingplatform == "javascript" %}

{% tabs %} {% highlight js tabtitle="index.js" %} {% include code-snippet/chart/tooltip-distance/index.js %} {% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/chart/tooltip-distance/index.html %} {% endhighlight %} {% endtabs %}

{% previewsample "page.domainurl/code-snippet/chart/tooltip-distance" %} {% endif %}

See also