Skip to main content

TooltipOptions

Namespace: Wisej.Web.Ext.ChartJS4.Models

Assembly: Wisej.Web.Ext.ChartJS4 (4.1.0.0)

Represents the configuration of the Chart.js tooltip plugin (options.plugins.tooltip), which controls when tooltips are shown, how they are positioned and how they look.

public class TooltipOptions : OptionsBase

An instance is created lazily by Tooltip. Changing any property updates the chart. Options that are not exposed as properties can be added through ExtensionData.

Example:

var chart = new ChartJS4();
var tooltip = chart.ChartOptions.Plugins.Tooltip;
tooltip.Mode = "index";
tooltip.BackgroundColor = Color.Black;

Constructors​

Instance member TooltipOptions()​

Initializes a new instance of TooltipOptions.

Properties​

Instance member BackgroundColor​

Object: Returns or sets the background color of the tooltip (Chart.js backgroundColor).

Value: A Color or a CSS color string. The default is null, which uses the Chart.js default (rgba(0, 0, 0, 0.8)).

Example:

var chart = new ChartJS4();
chart.ChartOptions.Plugins.Tooltip.BackgroundColor = "rgba(33, 33, 33, 0.9)";

Instance member BodyColor​

Object: Returns or sets the color of the tooltip body text (Chart.js bodyColor).

Value: A Color or a CSS color string. The default is null, which uses the Chart.js default (white).

Example:

var chart = new ChartJS4();
chart.ChartOptions.Plugins.Tooltip.BodyColor = "#e0e0e0";

Instance member BodyFont​

FontOptions: Returns or sets the font configuration of the tooltip body (Chart.js bodyFont).

Value: A FontOptions instance. The getter creates an empty instance on first access, so nested properties can be set directly.

Example:

var chart = new ChartJS4();
chart.ChartOptions.Plugins.Tooltip.BodyFont.Size = 14;
chart.ChartOptions.Plugins.Tooltip.BodyFont.Family = "Segoe UI";

Instance member BodySpacing​

Int32: Returns or sets the spacing, in pixels, added to the top and bottom of each tooltip item (Chart.js bodySpacing). (Default: 2)

Value: The spacing in pixels. The default is 2.

Example:

var chart = new ChartJS4();
chart.ChartOptions.Plugins.Tooltip.BodySpacing = 4;

Instance member BoxHeight​

Int32: Returns or sets the height, in pixels, of the color box when DisplayColors is true (Chart.js boxHeight).

Value: The height in pixels. The default is 0, which is not serialized, so Chart.js uses its default (the body font size).

Example:

var chart = new ChartJS4();
chart.ChartOptions.Plugins.Tooltip.BoxHeight = 12;

Instance member BoxWidth​

Int32: Returns or sets the width, in pixels, of the color box when DisplayColors is true (Chart.js boxWidth). (Default: 40)

Value: The width in pixels. The default is 40.

Example:

var chart = new ChartJS4();
chart.ChartOptions.Plugins.Tooltip.BoxWidth = 12;
chart.ChartOptions.Plugins.Tooltip.BoxHeight = 12;

Instance member CaretPadding​

Int32: Returns or sets the extra distance, in pixels, to move the end of the tooltip arrow away from the tooltip point (Chart.js caretPadding). (Default: 2)

Value: The distance in pixels. The default is 2.

Example:

var chart = new ChartJS4();
chart.ChartOptions.Plugins.Tooltip.CaretPadding = 6;

Instance member CaretSize​

Int32: Returns or sets the size, in pixels, of the tooltip arrow (Chart.js caretSize). (Default: 5)

Value: The arrow size in pixels; 0 hides the arrow. The default is 5.

Example:

var chart = new ChartJS4();
chart.ChartOptions.Plugins.Tooltip.CaretSize = 8;

Instance member CornerRadius​

Int32: Returns or sets the radius, in pixels, of the tooltip corner curves (Chart.js cornerRadius). (Default: 6)

Value: The corner radius in pixels. The default is 6.

Example:

var chart = new ChartJS4();
chart.ChartOptions.Plugins.Tooltip.CornerRadius = 0;

Instance member DisplayColors​

Boolean: Returns or sets whether color boxes are shown in the tooltip next to each item (Chart.js displayColors). (Default: True)

Value: true to show the color boxes; otherwise false. The default is true.

Example:

var chart = new ChartJS4();
bool showColors = chart.ChartOptions.Plugins.Tooltip.DisplayColors;

Instance member Enabled​

Boolean: Returns or sets whether tooltips are enabled (Chart.js enabled). (Default: True)

Value: true to show tooltips on hover; otherwise false. The default is true.

Example:

var chart = new ChartJS4();
bool enabled = chart.ChartOptions.Plugins.Tooltip.Enabled;

Instance member Intersect​

Boolean: Returns or sets whether the tooltip mode applies only when the mouse position intersects with an element (Chart.js intersect). (Default: True)

Value: If true (the default), the tooltip is shown only when the pointer is over an element; if false, the Mode is applied at all times.

Example:

var chart = new ChartJS4();
chart.ChartOptions.Plugins.Tooltip.Mode = "index";
bool intersect = chart.ChartOptions.Plugins.Tooltip.Intersect;

Instance member Mode​

String: Returns or sets the interaction mode that determines which elements appear in the tooltip (Chart.js mode).

Value: One of "point", "nearest", "index", "dataset", "x" or "y". The default is null, which uses the Chart.js default (the chart's interaction mode).

"index" shows all items at the same index across datasets, "dataset" shows all items of the same dataset, "nearest" the closest item, "point" the items that intersect the pointer, and "x"/"y" the items that intersect along that axis.

Example:

var chart = new ChartJS4();
chart.ChartOptions.Plugins.Tooltip.Mode = "index";

Instance member Padding​

Int32: Returns or sets the padding, in pixels, inside the tooltip (Chart.js padding). (Default: 6)

Value: The padding in pixels applied to all sides. The default is 6.

Example:

var chart = new ChartJS4();
chart.ChartOptions.Plugins.Tooltip.Padding = 10;

Instance member Position​

String: Returns or sets the tooltip position mode, which defines how the position of the tooltip is calculated (Chart.js position). (Default: null)

Value: Accepted values: "average" | "nearest" | "bottom" (or the name of a custom positioner registered on the client). The default is null, in which case Chart.js uses "average".

"average" places the tooltip at the average position of the items displayed; "nearest" places it at the position of the element closest to the event.

Example:

var chart = new ChartJS4();
chart.ChartOptions.Plugins.Tooltip.Position = "nearest";

Instance member TitleColor​

Object: Returns or sets the color of the tooltip title text (Chart.js titleColor).

Value: A Color or a CSS color string. The default is null, which uses the Chart.js default (white).

Example:

var chart = new ChartJS4();
chart.ChartOptions.Plugins.Tooltip.TitleColor = Color.Yellow;

Instance member TitleFont​

Font: Returns or sets the font used for the tooltip title (Chart.js titleFont). (Default: null)

Value: A Font, or null (the default) to use the Chart.js default title font.

Unlike BodyFont, which uses FontOptions, this property is typed as Font and is not created automatically.

Example:

var chart = new ChartJS4();
chart.ChartOptions.Plugins.Tooltip.TitleFont = new Font("Arial", 12, FontStyle.Bold);

Instance member TitleMarginBottom​

Int32: Returns or sets the margin, in pixels, added below the title section (Chart.js titleMarginBottom). (Default: 6)

Value: The margin in pixels. The default is 6.

Example:

var chart = new ChartJS4();
chart.ChartOptions.Plugins.Tooltip.TitleMarginBottom = 10;

Instance member TitleSpacing​

Int32: Returns or sets the spacing, in pixels, added to the top and bottom of each title line (Chart.js titleSpacing). (Default: 2)

Value: The spacing in pixels. The default is 2.

Example:

var chart = new ChartJS4();
chart.ChartOptions.Plugins.Tooltip.TitleSpacing = 4;

Instance member UsePointStyle​

Boolean: Returns or sets whether the tooltip color boxes use the point style of the dataset rather than the default square (Chart.js usePointStyle). (Default: False)

Value: true to use the dataset point style; otherwise false. The default is false.

Example:

var chart = new ChartJS4();
chart.ChartOptions.Plugins.Tooltip.UsePointStyle = true;

Methods​

Protected member OnChartChanged()​

Called when the Chart reference changes.

Instance member ResetBackgroundColor()​

Resets the BackgroundColor property to its default value (null).

Used by the designer to restore the default value.

Example:

chart.ChartOptions.Plugins.Tooltip.ResetBackgroundColor();

Instance member ResetBodyColor()​

Resets the BodyColor property to its default value (null).

Used by the designer to restore the default value.

Example:

chart.ChartOptions.Plugins.Tooltip.ResetBodyColor();

Instance member ResetBodyFont()​

Resets the BodyFont property to its default value by discarding the current FontOptions instance.

Used by the designer to restore the default value. A new, empty FontOptions is created the next time BodyFont is read.

Example:

chart.ChartOptions.Plugins.Tooltip.ResetBodyFont();

Instance member ResetBodySpacing()​

Resets the BodySpacing property to its default value (2).

Used by the designer to restore the default value.

Example:

chart.ChartOptions.Plugins.Tooltip.ResetBodySpacing();

Instance member ResetBoxHeight()​

Resets the BoxHeight property to its default value (0).

Used by the designer to restore the default value.

Example:

chart.ChartOptions.Plugins.Tooltip.ResetBoxHeight();

Instance member ResetBoxWidth()​

Resets the BoxWidth property to its default value (40).

Used by the designer to restore the default value.

Example:

chart.ChartOptions.Plugins.Tooltip.ResetBoxWidth();

Instance member ResetCaretPadding()​

Resets the CaretPadding property to its default value (2).

Used by the designer to restore the default value.

Example:

chart.ChartOptions.Plugins.Tooltip.ResetCaretPadding();

Instance member ResetCaretSize()​

Resets the CaretSize property to its default value (5).

Used by the designer to restore the default value.

Example:

chart.ChartOptions.Plugins.Tooltip.ResetCaretSize();

Instance member ResetCornerRadius()​

Resets the CornerRadius property to its default value (6).

Used by the designer to restore the default value.

Example:

chart.ChartOptions.Plugins.Tooltip.ResetCornerRadius();

Instance member ResetDisplayColors()​

Resets the DisplayColors property to its default value (true).

Used by the designer to restore the default value.

Example:

chart.ChartOptions.Plugins.Tooltip.ResetDisplayColors();

Instance member ResetEnabled()​

Resets the Enabled property to its default value (true).

Used by the designer to restore the default value.

Example:

chart.ChartOptions.Plugins.Tooltip.ResetEnabled();

Instance member ResetIntersect()​

Resets the Intersect property to its default value (true).

Used by the designer to restore the default value.

Example:

chart.ChartOptions.Plugins.Tooltip.ResetIntersect();

Instance member ResetMode()​

Resets the Mode property to its default value (null).

Used by the designer to restore the default value.

Example:

chart.ChartOptions.Plugins.Tooltip.ResetMode();

Instance member ResetPadding()​

Resets the Padding property to its default value (6).

Used by the designer to restore the default value.

Example:

chart.ChartOptions.Plugins.Tooltip.ResetPadding();

Instance member ResetPosition()​

Resets the Position property to its default value (null).

Used by the designer to restore the default value.

Example:

chart.ChartOptions.Plugins.Tooltip.ResetPosition();

Instance member ResetTitleColor()​

Resets the TitleColor property to its default value (null).

Used by the designer to restore the default value.

Example:

chart.ChartOptions.Plugins.Tooltip.ResetTitleColor();

Instance member ResetTitleFont()​

Resets the TitleFont property to its default value (null).

Used by the designer to restore the default value.

Example:

chart.ChartOptions.Plugins.Tooltip.ResetTitleFont();

Instance member ResetTitleMarginBottom()​

Resets the TitleMarginBottom property to its default value (6).

Used by the designer to restore the default value.

Example:

chart.ChartOptions.Plugins.Tooltip.ResetTitleMarginBottom();

Instance member ResetTitleSpacing()​

Resets the TitleSpacing property to its default value (2).

Used by the designer to restore the default value.

Example:

chart.ChartOptions.Plugins.Tooltip.ResetTitleSpacing();

Instance member ShouldSerializeBackgroundColor()​

Determines whether the BackgroundColor property should be serialized by the designer.

Returns: Boolean. true if BackgroundColor is not null; otherwise false.

Used by the designer together with ResetBackgroundColor.

Example:

var tooltip = chart.ChartOptions.Plugins.Tooltip;
if (tooltip.ShouldSerializeBackgroundColor())
    tooltip.ResetBackgroundColor();

Instance member ShouldSerializeBodyColor()​

Determines whether the BodyColor property should be serialized by the designer.

Returns: Boolean. true if BodyColor is not null; otherwise false.

Used by the designer together with ResetBodyColor.

Example:

var tooltip = chart.ChartOptions.Plugins.Tooltip;
if (tooltip.ShouldSerializeBodyColor())
    tooltip.ResetBodyColor();

Instance member ShouldSerializeBodyFont()​

Determines whether the BodyFont property should be serialized by the designer.

Returns: Boolean. true if BodyFont is not null; otherwise false.

Used by the designer together with ResetBodyFont. Because the BodyFont getter creates an instance on demand, this method effectively always returns true.

Example:

var tooltip = chart.ChartOptions.Plugins.Tooltip;
if (tooltip.ShouldSerializeBodyFont())
    tooltip.ResetBodyFont();

Instance member ShouldSerializeBodySpacing()​

Determines whether the BodySpacing property should be serialized by the designer.

Returns: Boolean. true if BodySpacing is not 2 (its default); otherwise false.

Used by the designer together with ResetBodySpacing.

Example:

var tooltip = chart.ChartOptions.Plugins.Tooltip;
if (tooltip.ShouldSerializeBodySpacing())
    tooltip.ResetBodySpacing();

Instance member ShouldSerializeBoxHeight()​

Determines whether the BoxHeight property should be serialized by the designer.

Returns: Boolean. true if BoxHeight is not 0 (its default); otherwise false.

Used by the designer together with ResetBoxHeight.

Example:

var tooltip = chart.ChartOptions.Plugins.Tooltip;
if (tooltip.ShouldSerializeBoxHeight())
    tooltip.ResetBoxHeight();

Instance member ShouldSerializeBoxWidth()​

Determines whether the BoxWidth property should be serialized by the designer.

Returns: Boolean. true if BoxWidth is not 40 (its default); otherwise false.

Used by the designer together with ResetBoxWidth.

Example:

var tooltip = chart.ChartOptions.Plugins.Tooltip;
if (tooltip.ShouldSerializeBoxWidth())
    tooltip.ResetBoxWidth();

Instance member ShouldSerializeCaretPadding()​

Determines whether the CaretPadding property should be serialized by the designer.

Returns: Boolean. true if CaretPadding is not 2 (its default); otherwise false.

Used by the designer together with ResetCaretPadding.

Example:

var tooltip = chart.ChartOptions.Plugins.Tooltip;
if (tooltip.ShouldSerializeCaretPadding())
    tooltip.ResetCaretPadding();

Instance member ShouldSerializeCaretSize()​

Determines whether the CaretSize property should be serialized by the designer.

Returns: Boolean. true if CaretSize is not 5 (its default); otherwise false.

Used by the designer together with ResetCaretSize.

Example:

var tooltip = chart.ChartOptions.Plugins.Tooltip;
if (tooltip.ShouldSerializeCaretSize())
    tooltip.ResetCaretSize();

Instance member ShouldSerializeCornerRadius()​

Determines whether the CornerRadius property should be serialized by the designer.

Returns: Boolean. true if CornerRadius is not 6 (its default); otherwise false.

Used by the designer together with ResetCornerRadius.

Example:

var tooltip = chart.ChartOptions.Plugins.Tooltip;
if (tooltip.ShouldSerializeCornerRadius())
    tooltip.ResetCornerRadius();

Instance member ShouldSerializeDisplayColors()​

Determines whether the DisplayColors property should be serialized by the designer.

Returns: Boolean. true if DisplayColors is not true (its default); otherwise false.

Used by the designer together with ResetDisplayColors.

Example:

var tooltip = chart.ChartOptions.Plugins.Tooltip;
if (tooltip.ShouldSerializeDisplayColors())
    tooltip.ResetDisplayColors();

Instance member ShouldSerializeEnabled()​

Determines whether the Enabled property should be serialized by the designer.

Returns: Boolean. true if Enabled is not true (its default); otherwise false.

Used by the designer together with ResetEnabled.

Example:

var tooltip = chart.ChartOptions.Plugins.Tooltip;
if (tooltip.ShouldSerializeEnabled())
    tooltip.ResetEnabled();

Instance member ShouldSerializeIntersect()​

Determines whether the Intersect property should be serialized by the designer.

Returns: Boolean. true if Intersect is not true (its default); otherwise false.

Used by the designer together with ResetIntersect.

Example:

var tooltip = chart.ChartOptions.Plugins.Tooltip;
if (tooltip.ShouldSerializeIntersect())
    tooltip.ResetIntersect();

Instance member ShouldSerializeMode()​

Determines whether the Mode property should be serialized by the designer.

Returns: Boolean. true if Mode is not null; otherwise false.

Used by the designer together with ResetMode.

Example:

var tooltip = chart.ChartOptions.Plugins.Tooltip;
if (tooltip.ShouldSerializeMode())
    tooltip.ResetMode();

Instance member ShouldSerializePadding()​

Determines whether the Padding property should be serialized by the designer.

Returns: Boolean. true if Padding is not 6 (its default); otherwise false.

Used by the designer together with ResetPadding.

Example:

var tooltip = chart.ChartOptions.Plugins.Tooltip;
if (tooltip.ShouldSerializePadding())
    tooltip.ResetPadding();

Instance member ShouldSerializePosition()​

Determines whether the Position property should be serialized by the designer.

Returns: Boolean. true if Position is not null; otherwise false.

Used by the designer together with ResetPosition.

Example:

var tooltip = chart.ChartOptions.Plugins.Tooltip;
if (tooltip.ShouldSerializePosition())
    tooltip.ResetPosition();

Instance member ShouldSerializeTitleColor()​

Determines whether the TitleColor property should be serialized by the designer.

Returns: Boolean. true if TitleColor is not null; otherwise false.

Used by the designer together with ResetTitleColor.

Example:

var tooltip = chart.ChartOptions.Plugins.Tooltip;
if (tooltip.ShouldSerializeTitleColor())
    tooltip.ResetTitleColor();

Instance member ShouldSerializeTitleFont()​

Determines whether the TitleFont property should be serialized by the designer.

Returns: Boolean. true if TitleFont is not null; otherwise false.

Used by the designer together with ResetTitleFont.

Example:

var tooltip = chart.ChartOptions.Plugins.Tooltip;
if (tooltip.ShouldSerializeTitleFont())
    tooltip.ResetTitleFont();

Instance member ShouldSerializeTitleMarginBottom()​

Determines whether the TitleMarginBottom property should be serialized by the designer.

Returns: Boolean. true if TitleMarginBottom is not 6 (its default); otherwise false.

Used by the designer together with ResetTitleMarginBottom.

Example:

var tooltip = chart.ChartOptions.Plugins.Tooltip;
if (tooltip.ShouldSerializeTitleMarginBottom())
    tooltip.ResetTitleMarginBottom();

Instance member ShouldSerializeTitleSpacing()​

Determines whether the TitleSpacing property should be serialized by the designer.

Returns: Boolean. true if TitleSpacing is not 2 (its default); otherwise false.

Used by the designer together with ResetTitleSpacing.

Example:

var tooltip = chart.ChartOptions.Plugins.Tooltip;
if (tooltip.ShouldSerializeTitleSpacing())
    tooltip.ResetTitleSpacing();