Search results

Tooltip

Represents the Tooltip control.

<div id="tooltip"/>
<script>
  var tooltipObj = new Tooltip({ isResponsive : true });
  tooltipObj.appendTo("#tooltip");
</script>

Properties

areaBounds

AreaBoundsModel

Bounds for the rect.

arrowPadding

number

Padding for arrow.

border

TooltipBorderModel

Options to customize tooltip borders.

clipBounds

ToolLocationModel

Clip location.

content

string[]

Content for the tooltip.

data

Object

Data for template.

enable

boolean

Enables / Disables the visibility of the tooltip.

Defaults to false.

enableAnimation

boolean

If set to true, ToolTip will animate while moving from one point to another.

Defaults to true.

enablePersistence

boolean

Enable or disable persisting component’s state between page reloads.

Defaults to false

enableRtl

boolean

Enable or disable rendering component in right to left direction.

Defaults to false

enableShadow

boolean

To enable shadow for the tooltip.

Defaults to true.

fill

string

The fill color of the tooltip that accepts value in hex and rgba as a valid CSS color string.

Header for tooltip.

inverted

boolean

To rotate the tooltip.

Defaults to false.

isNegative

boolean

Negative value of the tooltip.

Defaults to true.

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to

location

ToolLocationModel

Location for Tooltip.

marginX

number

Margin for left and right.

marginY

number

Margin for top and bottom. @private.

markerSize

number

Content for the tooltip.

offset

number

Location for Tooltip.

opacity

number

The fill color of the tooltip that accepts value in hex and rgba as a valid CSS color string.

palette

string[]

Palette for marker.

rx

number

Rounded corner for x.

ry

number

Rounded corner for y.

shapes

string[]

Shapes for marker.

shared

boolean

If set to true, a single ToolTip will be displayed for every index.

Defaults to false.

template

string

Custom template to format the ToolTip content. Use ${x} and ${y} as the placeholder text to display the corresponding data point.

Defaults to null.

textStyle

TextStyleModel

Options to customize the ToolTip text.

theme

string

Specifies the theme for the chart.

Defaults to ‘Material’

Methods

addEventListener

Adds the handler to the given event listener.

Returns void

appendTo

Appends the control within the given HTML element

Parameter Type Description
selector (optional) string | HTMLElement Target element where control needs to be appended

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

getModuleName

Get component name @private

Returns string

refresh

Applies all the pending property changes and render the component again.

Returns void

removeEventListener

Removes the handler from the given event listener.

Returns void

Inject

Dynamically injects the required modules to the component.

Returns void

Events

animationComplete

EmitType<ITooltipAnimationCompleteArgs>

Triggers after chart load.

loaded

EmitType<ITooltipLoadedEventArgs>

Triggers after chart load.

tooltipRender

EmitType<ITooltipRenderingEventArgs>

Triggers before each axis range is rendered.