class anychart.core.ui.Tooltip Improve this Doc

Class for the tooltip.

Methods Overview

Specific settings
allowLeaveChart()	Tooltip allowLeaveChart settings.
allowLeaveScreen()	Tooltip allowLeaveScreen settings.
allowLeaveStage()	Tooltip allowLeaveStage settings.
displayMode()	Display mode settings.
format()	Function to format content text.
hide()	Hides tooltips with delay.
hideDelay()	Hide delay settings.
titleFormat()	Function to format title text.
unionFormat()	Function to format content text.
valuePostfix()	Postfix settings.
valuePrefix()	Prefix settings.
Base Text Settings
maxLength()	Maximum text length.
Content Text Settings
disablePointerEvents()	Pointer events settings.
fontColor()	Font color settings.
fontDecoration()	Font decoration setting.
fontFamily()	Font family settings.
fontOpacity()	Font opacity settings.
fontSize()	Font size settings.
fontStyle()	Font style settings.
fontVariant()	Font variant settings.
fontWeight()	Font weight settings.
hAlign()	Text horizontal align settings.
letterSpacing()	Text letter spacing settings.
lineHeight()	Text line height setting.
selectable()	Text selectable option.
textDirection()	Text direction settings.
textIndent()	Text indent settings.
textOverflow()	Text overflow settings.
textSettings()	Font opacity setting.
textShadow()	Font color settings.
useHtml()	Enable/Disable HTML tooltip.
vAlign()	Text vertical align settings.
wordBreak()	Word break mode.
wordWrap()	Word-wrap mode.
Events
onBeforeContentChange()	onBeforeContentChange handler.
onBeforeTitleChange()	onBeforeTitleChange handler.
onContentChanged()	onContentChanged handler.
onDomReady()	onDomReady handler.
onTitleChanged()	onTitleChanged handler.
Interactivity
enabled()	Element state (enabled or disabled).
Size and Position
anchor()	Anchor settings.
height()	Tooltip height.
offsetX()	X offset settings.
offsetY()	Y offset settings.
padding()	Padding settings.
position()	Position settings.
positionMode()	Position mode settings.
width()	Tooltip width.
zIndex()	Z-index of the element.
Text Settings
adjustFontSize()	Adjusting settings.
maxFontSize()	Maximum font size settings.
minFontSize()	Minimum font size settings.
Visual settings
background()	Background settings.
separator()	Separator settings.
title()	Title settings.

Methods Description

adjustFontSize

adjustFontSize()Since version 7.12.0

Getter for the adjusting font size.

Detailed description

Returns an array of two elements [isAdjustByWidth, isAdjustByHeight].

[false, false] - do not adjust (adjust is off )
[true, false] - adjust width
[false, true] - adjust height
[true, true] - adjust the first suitable value.

Returns:

number - An adjusted font size.

See listing

var tooltip = chart.tooltip();
var adjustFontSize = tooltip.adjustFontSize();

adjustFontSize(adjustOrAdjustByWidth, adjustByHeight)Since version 7.12.0

Setter for the adjusting font size.

Detailed description

Minimal and maximal font sizes can be configured using: anychart.core.ui.Tooltip#minFontSize and anychart.core.ui.Tooltip#maxFontSize methods.
Note: anychart.core.ui.Tooltip#fontSize does not work when adjusting is enabled.

Params:

Name	Type	Description
adjustOrAdjustByWidth	boolean \| Array.<boolean> \| Object	Is font needs to be adjusted in case of 1 argument and adjusted by width in case of 2 arguments.
adjustByHeight	boolean	Is font needs to be adjusted by height.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

allowLeaveChart

allowLeaveChart()Since version 7.12.0

Getter for the allowLeaveChart tooltip mode.

Returns:

boolean - Boolean value.

See listing

var tooltipSettings = chart.tooltip();
var value = tooltipSettings.allowLeaveChart();

allowLeaveChart(enabled)Since version 7.12.0

Setter for the allowLeaveChart tooltip mode.

Detailed description

The tooltip uses a global container when the "true" value is set for the tooltip.allowLeaveChart() and the tooltip.allowLeaveStage() methods. Use hideTooltips() method in Single Page Application for this case.

Params:

Name	Type	Default	Description
enabled	boolean	true	Allow or forbid tooltip to leave chart when moving.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

allowLeaveScreen

allowLeaveScreen()

Getter for the allowLeaveScreen tooltip mode.

Returns:

boolean - Boolean value.

See listing

var tooltipSettings = chart.tooltip();
var value = tooltipSettings.allowLeaveScreen();

allowLeaveScreen(enabled)

Setter for the allowLeaveScreen tooltip mode.

Params:

Name	Type	Default	Description
enabled	boolean	false	Allow or forbid tooltip to leave screen when moving.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

allowLeaveStage

allowLeaveStage()Since version 7.13.1

Getter for the allowLeaveStage tooltip mode.

Returns:

boolean - Boolean value.

See listing

var tooltipSettings = chart.tooltip();
var value = tooltipSettings.allowLeaveStage();

allowLeaveStage(enabled)Since version 7.13.1

Setter for the allowLeaveStage tooltip mode.

Detailed description

Params:

Name	Type	Default	Description
enabled	boolean	false	Allow or forbid tooltip to leave stage when moving.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

anchor

anchor()Since version 7.12.0

Getter for the tooltip anchor.

Returns:

anychart.enums.Anchor | string - Tooltip anchor settings.

See listing

var tooltip = chart.tooltip();
var anchor = tooltip.anchor();

anchor(anchor)Since version 7.12.0

Setter for the tooltip anchor.

Params:

Name	Type	Default	Description
anchor	anychart.enums.Anchor \| string	'left-top'	Value to set.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

background

background()Since version 7.12.0

Getter for tooltip background settings.

Returns:

anychart.core.ui.Background - Background settings.

See listing

var tooltip = chart.tooltip();
var background = tooltip.background();

background(settings)Since version 7.12.0

Setter for tooltip background settings.

Detailed description

Setter for background settings depending on parameter type:

null/boolean - disable background.
object - sets background settings.
string - sets fill settings.

Params:

Name	Type	Description
settings	null \| boolean \| Object \| string	Background settings.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

disablePointerEvents

disablePointerEvents()Since version 7.12.0

Getter for the pointer events settings.

Returns:

boolean - The pointer events settings.

See listing

var tooltip = chart.tooltip();
var disablePointerEvents = tooltip.disablePointerEvents();

disablePointerEvents(enabled)Since version 7.12.0

Setter for the pointer events setting.

Params:

Name	Type	Default	Description
enabled	boolean	false	Value to set.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

displayMode

displayMode()Since version 7.12.0

Getter for display mode settings.

Returns:

anychart.enums.TooltipDisplayMode | string - Display mode.

See listing

var tooltip = chart.tooltip();
var displayMode = tooltip.displayMode();

displayMode(value)Since version 7.12.0

Setter for display mode settings. Note: Works only for the chart tooltip.

Params:

Name	Type	Default	Description
value	anychart.enums.TooltipDisplayMode \| string	'single'	Value to set.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

enabled

enabled()

Getter for the element state (enabled or disabled).

Returns:

boolean - Element state.

Try it:

Usage sample

enabled(enabled)

Setter for the element enabled state.

Params:

Name	Type	Default	Description
enabled	boolean	true	Enabled state to set.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Example.

if (!element.enabled())
   element.enabled(true);

Try it:

Usage sample

fontColor

fontColor()Since version 7.12.0

Getter for font color settings.

Returns:

string - Font color settings.

See listing

var tooltip = chart.tooltip();
var fontColor = tooltip.fontColor();

fontColor(color)Since version 7.12.0

Setter for font color settings.

Params:

Name	Type	Description
color	string	Font color to set.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

fontDecoration

fontDecoration()Since version 7.12.0

Getter for font decoration settings.

Returns:

anychart.graphics.vector.Text.Decoration - Font decoration settings.

See listing

var tooltip = chart.tooltip();
var fontDecoration = tooltip.fontDecoration();

fontDecoration(value)Since version 7.12.0

Setter for font decoration settings.

Params:

Name	Type	Description
value	anychart.graphics.vector.Text.Decoration \| string	Font decoration to set.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

fontFamily

fontFamily()Since version 7.12.0

Getter for font family settings.

Returns:

string - Font family settings.

See listing

var tooltip = chart.tooltip();
var fontFamily = tooltip.fontFamily();

fontFamily(family)Since version 7.12.0

Setter for font family settings.

Params:

Name	Type	Description
family	string	Font family to set.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

fontOpacity

fontOpacity()Since version 7.12.0

Getter for font opacity settings.

Returns:

number - Font opacity settings.

See listing

var tooltip = chart.tooltip();
var fontOpacity = tooltip.fontOpacity();

fontOpacity(opacity)Since version 7.12.0

Setter for font opacity settings.

Params:

Name	Type	Description
opacity	number	Font opacity to set.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

Name	Type	Description
size	number \| string	Font size to set.

fontStyle

fontStyle()Since version 7.12.0

Getter for font style settings.

Returns:

anychart.graphics.vector.Text.FontStyle - Font style settings.

See listing

var tooltip = chart.tooltip();
var fontStyle = tooltip.fontStyle();

fontStyle(style)Since version 7.12.0

Setter for font style settings.

Params:

Name	Type	Description
style	string \| anychart.graphics.vector.Text.FontStyle	Font style to set.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

fontVariant

fontVariant()Since version 7.12.0

Getter for font variant settings.

Returns:

anychart.graphics.vector.Text.FontVariant - Font variant settings.

See listing

var tooltip = chart.tooltip();
var fontVariant = tooltip.fontVariant();

fontVariant(value)Since version 7.12.0

Setter for font variant settings.

Params:

Name	Type	Description
value	string \| anychart.graphics.vector.Text.FontVariant	Font variant to set.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

fontWeight

fontWeight()Since version 7.12.0

Getter for font weight settings.

Returns:

string | number - Font weight settings.

See listing

var tooltip = chart.tooltip();
var fontWeight = tooltip.fontWeight();

fontWeight(weight)Since version 7.12.0

Setter for font weight settings.

Params:

Name	Type	Description
weight	string \| number	Font weight to set.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

format

format()Since version 7.12.0

Getter for the function content text for the tooltip.

Returns:

function | string - Function to format title text.

See listing

var tooltipSettings = chart.tooltip();
var format = tooltipSettings.format();

format(format)Since version 7.12.0

Setter for function content text for the tooltip.
Learn more about using the format() method.

Params:

Name	Type	Description
format	function \| string	Function or string token to format content text.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

hAlign

hAlign()Since version 7.12.0

Getter for text horizontal align settings.

Returns:

anychart.graphics.vector.Text.HAlign - Horizontal align settings.

See listing

var tooltip = chart.tooltip();
var hAlign = tooltip.hAlign();

hAlign(align)Since version 7.12.0

Setter for the text horizontal align settings.

Params:

Name	Type	Description
align	string \| anychart.graphics.vector.Text.HAlign	Horizontal align to set.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

height

height()

Getter for the tooltip height.

Returns:

string | number - Tooltip height.

See listing

var tooltipSettings = chart.tooltip();
var height = tooltipSettings.height();

height(height)

Setter for the tooltip height.

Params:

Name	Type	Description
height	string \| number	Tooltip height to set.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

hide

hide(force, event)Since version 7.10.0

Hides tooltips with delay.

Params:

Name	Type	Description
force	boolean	Ignore tooltips hide delay.
event	anychart.core.MouseEvent	Event that initiate tooltip hiding.

Returns:

boolean - Returns true if the tooltip was hidden.

Try it:

Usage sample

hideDelay

hideDelay()Since version 7.12.0

Getter for delay in milliseconds before union tooltip item becomes hidden.

Returns:

number - Hide delay settings.

See listing

var tooltip = chart.tooltip();
var hideDelay = tooltip.hideDelay();

hideDelay(delay)Since version 7.12.0

Setter for the delay in milliseconds before a tooltip becomes hidden.

Params:

Name	Type	Default	Description
delay	number	0	Delay in milliseconds.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

letterSpacing

letterSpacing()Since version 7.12.0

Getter for text letter spacing settings.

Returns:

number - Letter spacing settings.

See listing

var tooltip = chart.tooltip();
var letterSpacing = tooltip.letterSpacing();

letterSpacing(spacing)Since version 7.12.0

Setter for text letter spacing settings.

Params:

Name	Type	Description
spacing	number	Value to set.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

lineHeight

lineHeight()Since version 7.12.0

Getter for text line height settings.

Returns:

number | string - Line height settings.

See listing

var tooltip = chart.tooltip();
var lineHeight = tooltip.lineHeight();

lineHeight(height)Since version 7.12.0

Setter for text line height settings.

Params:

Name	Type	Default	Description
height	number \| string	'normal'	Line height to set.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

maxFontSize

maxFontSize()Since version 7.12.0

Getter for maximum font size settings for adjust text from.

Returns:

number - Maximum font size.

See listing

var tooltip = chart.tooltip();
var maxFontSize = tooltip.maxFontSize();

maxFontSize(size)Since version 7.12.0

Setter for maximum font size settings for adjust text from.

Detailed description

Note: works only when adjusting is enabled. Look anychart.core.ui.Tooltip#adjustFontSize.

Params:

Name	Type	Default	Description
size	number \| string	9	Maximum font size to set.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

maxLength

maxLength()

Getter for maximum text length.

Returns:

number | null - Maximum length of text.

See listing

var maxLengthValue = chart.tooltip().maxLength(); // null by default.

maxLength(maxLength)

Setter for maximum text length.

Params:

Name	Type	Default	Description
maxLength	number \| null	null	Maximum text length to set.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

See listing

chart.tooltip().maxLength(15); // Limit characters count for tooltip format.

Try it:

Limit characters count of chart tooltip.

minFontSize

minFontSize()Since version 7.12.0

Getter for minimum font size settings for adjust text from.

Returns:

number - Minimum font size.

See listing

var tooltip = chart.tooltip();
var minFontSize = tooltip.minFontSize();

minFontSize(size)Since version 7.12.0

Setter for minimum font size settings for adjust text from.

Detailed description

Note: works only when adjusting is enabled. Look anychart.core.ui.Tooltip#adjustFontSize.

Params:

Name	Type	Default	Description
size	number \| string	9	Minimum font size to set.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

offsetX

offsetX()Since version 7.12.0

Getter for the tooltip offset by X.

Returns:

number - Tooltip offset by X.

See listing

var tooltip = chart.tooltip();
var offsetX = tooltip.offsetX();

offsetX(offset)Since version 7.12.0

Setter for union tooltip offsetX.

Params:

Name	Type	Description
offset	number	Offset by X to set.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

offsetY

offsetY()Since version 7.12.0

Getter for the tooltip offset by Y.

Returns:

number - Tooltip offset by Y.

See listing

var tooltip = chart.tooltip();
var offsetY = tooltip.offsetY();

offsetY(offset)Since version 7.12.0

Setter for the tooltip offset by Y.

Params:

Name	Type	Description
offset	number	Offset by Y to set.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

onBeforeContentChange

onBeforeContentChange()Since version 8.3.0

Getter for the onBeforeContentChange handler.

Returns:

function():boolean - Handler function.

onBeforeContentChange(handler)Since version 8.3.0

Setter for the onBeforeContentChange handler.
Enable HTML-mode for the tooltip with tooltip.useHtml(true) to work with onBeforeContentChange().

The handler is called before changes are applied.
The handler determines whether to change the content.
If the handler returns true, then the content is changed and the handler passed to onContentChanged() is called.
If the handler returns false the content is not changed and the handler passed to onTitleChanged() will never be called.

See the structure of HTML-tooltip elements in the useHtml() method.

Params:

Name	Type	Description
handler	function():boolean	Handler function. Function that looks like function(){ Handler context contains following fields: // this.parentElement - reference to the basic HTML-element. The parent DIV of the entire element // this.titleElement - reference to the title DIV // this.separatorElement - reference to HR-element, tooltip separator // this.contentElement - reference to the DIV of the tooltip content return booleanFlag // type boolean. If the handler returns true then the content is changed. If the handler returns false then the content is not changed. }

Name

Type

Description

handler

function():boolean

Handler function. Function that looks like

function(){
Handler context contains following fields:
// this.parentElement - reference to the basic HTML-element. The parent DIV of the entire element
// this.titleElement - reference to the title DIV
// this.separatorElement - reference to HR-element, tooltip separator
// this.contentElement - reference to the DIV of the tooltip content
return booleanFlag // type boolean. If the handler returns true then the content is changed. If the handler returns false then the content is not changed.
}

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

onBeforeTitleChange

onBeforeTitleChange()Since version 8.3.0

Getter for the onBeforeTitleChange handler.

Returns:

function():boolean - Handler function.

onBeforeTitleChange(handler)Since version 8.3.0

Setter for the onBeforeTitleChange handler.
Enable HTML-mode for the tooltip with tooltip.useHtml(true) to work with onBeforeTitleChange().

The handler is called before changes are applied.
The handler determines whether to change the title.
If the handler returns true, then the title is changed and the handler passed to onTitleChanged() is called.
If the handler returns false the title is not changed and the handler passed to onTitleChanged() will never be called.

See the structure of HTML-tooltip elements in the useHtml() method.

Params:

Name	Type	Description
handler	function():boolean	Handler function. Function that looks like function(){ Handler context contains following fields: // this.parentElement - reference to the basic HTML-element. The parent DIV of the entire element // this.titleElement - reference to the title DIV // this.separatorElement - reference to HR-element, tooltip separator // this.contentElement - reference to the DIV of the tooltip content return booleanFlag // type boolean. If the handler returns true then the title is changed. If the handler returns false then the title is not changed. }

Name

Type

Description

handler

function():boolean

Handler function. Function that looks like

function(){
Handler context contains following fields:
// this.parentElement - reference to the basic HTML-element. The parent DIV of the entire element
// this.titleElement - reference to the title DIV
// this.separatorElement - reference to HR-element, tooltip separator
// this.contentElement - reference to the DIV of the tooltip content
return booleanFlag // type boolean. If the handler returns true then the title is changed. If the handler returns false then the title is not changed.
}

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

onContentChanged

onContentChanged()Since version 8.3.0

Getter for the onContentChanged handler.

Returns:

function - Handler function.

onContentChanged(handler)Since version 8.3.0

Setter for the onContentChanged handler.
Enable HTML-mode for the tooltip with tooltip.useHtml(true) to work with onContentChanged().

The method informs that the content has been changed.
The onContentChanged() method is called only if the onBeforeContentChange() method returns true.

See the structure of HTML-tooltip elements in the useHtml() method.

Params:

Name	Type	Description
handler	function	Handler function. Function that looks like function(){ Handler context contains following fields: // this.parentElement - reference to the basic HTML-element. The parent DIV of the entire element // this.titleElement - reference to the title DIV // this.separatorElement - reference to HR-element, tooltip separator // this.contentElement - reference to the DIV of the tooltip content }

Name

Type

Description

handler

function

Handler function. Function that looks like

function(){
Handler context contains following fields:
// this.parentElement - reference to the basic HTML-element. The parent DIV of the entire element
// this.titleElement - reference to the title DIV
// this.separatorElement - reference to HR-element, tooltip separator
// this.contentElement - reference to the DIV of the tooltip content
}

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

onDomReady

onDomReady()Since version 8.3.0

Getter for the onDomReady handler.

Returns:

function - Handler function.

onDomReady(handler)Since version 8.3.0

Setter for the onDomReady handler.
Enable HTML-mode for the tooltip with tooltip.useHtml(true) to work with onDomReady().

The handler set from the onDomReady() method is called once when all elements of the HTML-tooltip have been created.
The handler set from the onDomReady() method is called for each tooltip on the chart. Setting the onDomReady() handler to a chart calls a handler for each tooltip on the chart (for example, several tooltips for separated mode).

See the structure of HTML-tooltip elements in the useHtml() method.

Params:

Name	Type	Description
handler	function	Handler function. Function that looks like function(){ Handler context contains following fields: // this.parentElement - reference to the basic HTML-element. The parent DIV of the entire element // this.titleElement - reference to the title DIV // this.separatorElement - reference to HR-element, tooltip separator // this.contentElement - reference to the DIV of the tooltip content }

Name

Type

Description

handler

function

Handler function. Function that looks like

function(){
Handler context contains following fields:
// this.parentElement - reference to the basic HTML-element. The parent DIV of the entire element
// this.titleElement - reference to the title DIV
// this.separatorElement - reference to HR-element, tooltip separator
// this.contentElement - reference to the DIV of the tooltip content
}

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

onTitleChanged

onTitleChanged()Since version 8.3.0

Getter for the onTitleChanged handler.

Returns:

function - Handler function.

onTitleChanged(handler)Since version 8.3.0

Setter for the onTitleChanged handler.
Enable HTML-mode for the tooltip with tooltip.useHtml(true) to work with onTitleChanged().

The method informs that the title has been changed.
The onTitleChanged() method is called only if the onBeforeTitleChange() method returns true.

See the structure of HTML-tooltip elements in the useHtml() method.

Params:

Name	Type	Description
handler	function	Handler function. Function that looks like function(){ Handler context contains following fields: // this.parentElement - reference to the basic HTML-element. The parent DIV of the entire element // this.titleElement - reference to the title DIV // this.separatorElement - reference to HR-element, tooltip separator // this.contentElement - reference to the DIV of the tooltip content }

Name

Type

Description

handler

function

Handler function. Function that looks like

function(){
Handler context contains following fields:
// this.parentElement - reference to the basic HTML-element. The parent DIV of the entire element
// this.titleElement - reference to the title DIV
// this.separatorElement - reference to HR-element, tooltip separator
// this.contentElement - reference to the DIV of the tooltip content
}

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

padding

padding()Since version 7.12.0

Getter for the tooltip padding.

Detailed description

Also, you can use anychart.core.utils.Padding#bottom, anychart.core.utils.Padding#left, anychart.core.utils.Padding#right, anychart.core.utils.Padding#top methods to setting paddings.

Returns:

anychart.core.utils.Padding - Tooltip padding.

Try it:

Usage sample

padding(padding)Since version 7.12.0

Setter for the tooltip padding in pixels by one value.

Params:

Name	Type	Default	Description
padding	Array.<(number\|string)> \| Object	{top: 5, right: 10, bottom: 5, left: 10}	Value to set.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

padding(value1, value2, value3, value4)Since version 7.12.0

Setter for the tooltip padding in pixels.

Params:

Name	Type	Default	Description
value1	string \| number	5	Top or top-bottom space.
value2	string \| number	10	Right or right-left space.
value3	string \| number	5	Bottom space.
value4	string \| number	10	Left space.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Example

// 1) top and bottom 10px, left and right 15px
label.padding(10, '15px');
// 2) top 10px, left and right 15px, bottom 5px
label.padding(10, '15px', 5);
// 3) top 10px, right 15px, bottom 5px, left 12px
label.padding(10, '15px', '5px', 12);

Try it:

Usage sample

position

position()Since version 7.12.0

Getter for the union tooltip position.

Returns:

anychart.enums.Position | string - Tooltip position.

See listing

var tooltip = chart.tooltip();
var position = tooltip.position();

position(position)Since version 7.12.0

Setter for the union tooltip position.
Note: Do not works with position mode FLOAT.

Params:

Name	Type	Description
position	anychart.enums.Position \| string	Position to set.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

positionMode

positionMode()Since version 7.12.0

Getter for all tooltips position mode.

Returns:

string - Position mode.

See listing

var tooltip = chart.tooltip();
var positionMode = tooltip.positionMode();

positionMode(mode)Since version 7.12.0

Setter for all tooltips position mode.

Params:

Name	Type	Description
mode	anychart.enums.TooltipPositionMode \| string	Position mode to set.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

selectable

selectable()Since version 7.12.0

Getter for the text selectable option.

Returns:

boolean - Text selectable value.

See listing

var tooltip = chart.tooltip();
var selectable = tooltip.selectable();

selectable(enabled)Since version 7.12.0

Setter for the text selectable option.

Params:

Name	Type	Default	Description
enabled	boolean	false	Selectable option to set.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

separator

separator()Since version 7.12.0

Getter for the union tooltip separator.

Returns:

anychart.core.ui.Separator - Tooltip separator.

Try it:

Usage sample

separator(settings)Since version 7.12.0

Setter for the union tooltip separator.

Detailed description

Setter for separator settings depending on parameter type:

null/boolean - disables separator.
object - sets separator settings.

Params:

Name	Type	Description
settings	null \| boolean \| Object	Separator settings.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

textDirection

textDirection()Since version 7.12.0

Getter for the text direction settings.

Returns:

anychart.graphics.vector.Text.Direction - Text direction settings.

See listing

var tooltip = chart.tooltip();
var textDirection = tooltip.textDirection();

textDirection(value)Since version 7.12.0

Setter for text direction settings.

Params:

Name	Type	Description
value	string \| anychart.graphics.vector.Text.Direction	Text direction to set.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

textIndent

textIndent()

Getter for text-indent settings.

Returns:

number - Text indent settings.

See listing

var tooltip = chart.tooltip();
var textIndent = tooltip.textIndent();

textIndent(indent)Since version 7.12.0

Setter for text-indent settings.

Params:

Name	Type	Description
indent	number	Text indent to set.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

textOverflow

textOverflow()Since version 7.12.0

Getter for text overflow settings.

Returns:

anychart.graphics.vector.Text.TextOverflow - Text overflow settings

See listing

var tooltip = chart.tooltip();
var textOverflow = tooltip.textOverflow();

textOverflow(value)Since version 7.12.0

Setter for text overflow settings.

Params:

Name	Type	Description
value	anychart.graphics.vector.Text.TextOverflow \| string	Value to set

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

textSettings

textSettings()Since version 7.12.0

Getter for the full text appearance settings.

Returns:

Object | string | number | boolean - Text settings.

See listing

var tooltip = chart.tooltip();
var textSettings = tooltip.textSettings();

textSettings(settings)Since version 7.12.0

Setter for the full text appearance settings.

Params:

Name	Type	Description
settings	Object	Few text settings.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

textSettings(name, value)Since version 7.12.0

Setter for the custom text appearance settings.

Params:

Name	Type	Description
name	string	Text settings name.
value	string \| number \| boolean	Value to set.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

textShadow

textShadow()Since version 8.7.2

Getter for text shadow settings.

Returns:

string - String representation of text shadow.

See listing

var tooltip = chart.tooltip();
var textShadow = tooltip.textShadow();

textShadow(textShadow)Since version 8.7.2

Setter for text shadow settings.

Params:

Name	Type	Default	Description
textShadow	anychart.graphics.vector.TextShadow \| string	'none'	Text shadow to set.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

title

title()Since version 7.12.0

Getter for union tooltip title visual settings.

Returns:

anychart.core.ui.Title - An instance of the class for method chaining.

See listing

var tooltip = chart.tooltip();
var title = tooltip.title();

title(settings)Since version 7.12.0

Setter for union tooltip title visual settings.

Detailed description

Setter for title settings depending on parameter type:

null/false - disable title.
object - Setter for title settings.

Note: use method anychart.core.ui.Tooltip#format to set title text.

Params:

Name	Type	Description
settings	null \| boolean \| Object	Title settings.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

titleFormat

titleFormat()Since version 7.12.0

Getter for the function to format title.

Returns:

function | string - Function to format title text.

See listing

var tooltipSettings = chart.tooltip();
var formatter = tooltipSettings.titleFormat();

titleFormat(format)Since version 7.12.0

Setter for the function to format title.
Note: Use anychart.core.ui.Tooltip#title method to set title visual settings.

Params:

Name	Type	Default	Description
format	function \| string	function() {return 'Tooltip';}	Function to format title text. Function that looks like: function(){ // this.clientX - X coordinate of the mouse // this.clientY - Y coordinate of the mouse // this.formattedValues - array of the formatted values for the tooltip // this.points - array of the series points // this.allPoints - array of the all points // this.titleText - tooltip title text return titleFormatValue; // type Function }

Name

Type

Default

Description

format

function | string

function() {return 'Tooltip';}

Function to format title text. Function that looks like:

function(){
   // this.clientX - X coordinate of the mouse
   // this.clientY - Y coordinate of the mouse
   // this.formattedValues - array of the formatted values for the tooltip
   // this.points - array of the series points
   // this.allPoints - array of the all points
   // this.titleText - tooltip title text
   return titleFormatValue; // type Function
}

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

unionFormat

unionFormat()Since version 7.12.0

Getter for the function content text for union tooltip.

Returns:

function():string | string - Function to format title text.

See listing

var tooltipSettings = chart.tooltip();
var formatter = tooltipSettings.unionFormat();

unionFormat(unionFormat)Since version 7.12.0

Setter for the function content text for union tooltip.
Learn more about using unionFormat() method.

Params:

Name	Type	Description
unionFormat	function():string \| string	Function or string token ('{%joinedFormattedValues}') to format content text. UnionFormat-function that looks like:function() { // this.clientX - X coordinate of the mouse. Type is number // this.clientY - Y coordinate of the mouse. Type is number // this.dataIntervalUnit - Interval unit. Type is string // this.dataIntervalUnitCount - Interval unit count. Type is number // this.formattedValues - Formatted values for the tooltip. Type is array of the string // this.hoveredDate - Type is number // this.isGrouped - Type is boolean // this.joinedFormattedValues - Formatted values for the join through and '/n' (if tooltip.useHtml() is set to true, it parses the tag, if tooltip.useHtml() is set to false, it parses '/n'). Type is string // this.name - Name. Type is string // this.points - Series points. Type is array // this.rawHoveredDate - Type is number // this.titleText - Tooltip title text. Type is number // this.valuePostfix - Postfix value. Type is number // this.valuePrefix - Prefix value. Type is number // this.x - The current x. Type is number } return unionFormat // string

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

useHtml

useHtml()Since version 7.12.0

Getter for the useHTML flag.

Returns:

boolean - UseHTML flag.

See listing

var tooltip = chart.tooltip();
var useHtml = tooltip.useHtml();

useHtml(enabled)Since version 7.12.0

Setter for the HTML tooltip mode. Learn more about HTML tooltip
When the HTML tooltip mode is set to true AnyChart Component installs default tooltip CSS classes. Override the CSS class of the tooltip to customize the tooltip visually. Learn more about CSS Classes HTML-tooltip has the following DOM structure:

<div class="anychart-tooltip"> // The basic HTML-element. The parent DIV of the entire element.
     <div class="anychart-tooltip-title"></div> // The title element.
     <hr noshade="true" class="anychart-tooltip-separator"> // The tooltip separator element.
     <div></div> // The content element.
</div>

The HTML text obtained from tooltip.format() is rendered to the contentElement.
The HTML text obtained from tooltip.titleFormat() is rendered to the tltleElement.

Params:

Name	Type	Default	Description
enabled	boolean	false	Value to set.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

vAlign

vAlign()Since version 7.12.0

Getter for text vertical align settings.

Returns:

anychart.graphics.vector.Text.VAlign - Vertical align.

See listing

var tooltip = chart.tooltip();
var vAlign = tooltip.vAlign();

vAlign(align)Since version 7.12.0

Setter for text vertical align settings.

Params:

Name	Type	Description
align	string \| anychart.graphics.vector.Text.VAlign	Vertical align to set.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

valuePostfix

valuePostfix()Since version 7.12.0

Getter for tooltip postfix value.

Returns:

string - Postfix settings.

See listing

var tooltip = series.tooltip();
var valuePostfix = tooltip.valuePostfix();

valuePostfix(value)Since version 7.12.0

Setter for tooltip postfix value.

Params:

Name	Type	Default	Description
value	string	''	Value to set.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

valuePrefix

valuePrefix()Since version 7.12.0

Getter for tooltip prefix value.

Returns:

string - Prefix settings.

See listing

var tooltip = series.tooltip();
var valuePrefix = tooltip.valuePrefix();

valuePrefix(value)Since version 7.12.0

Setter for tooltip prefix value.

Params:

Name	Type	Default	Description
value	string	''	Value to set.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

width

width()

Getter for the tooltip width.

Returns:

string | number - Tooltip width.

See listing

var tooltipSettings = chart.tooltip();
var width = tooltipSettings.width();

width(width)

Setter for the tooltip width.

Params:

Name	Type	Description
width	string \| number	Tooltip width to set.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

wordBreak

wordBreak()Since version 8.0.0

Getter for the word-break mode.

Returns:

anychart.enums.WordBreak | string - Word-break mode.

See listing

var wordBreak = tooltip.wordBreak();

wordBreak(mode)Since version 8.0.0

Setter for the word-break mode.

Params:

Name	Type	Default	Description
mode	anychart.enums.WordBreak \| string	'normal'	Value to set.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

wordWrap

wordWrap()Since version 8.0.0

Getter for the word-wrap mode.

Returns:

anychart.enums.WordWrap | string - Word-wrap mode.

See listing

var wordWrap = tooltip.wordWrap();

wordWrap(mode)Since version 8.0.0

Setter for the word-wrap mode.

Params:

Name	Type	Default	Description
mode	anychart.enums.WordWrap \| string	'normal'	Value to set.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample

zIndex

zIndex()

Getter for the Z-index of the element.

Returns:

number - Z-index.

Try it:

Usage sample

zIndex(zIndex)

Setter for the Z-index of the element.

Detailed description

The bigger the index - the higher the element position is.

Params:

Name	Type	Default	Description
zIndex	number	0	Value to set.

Returns:

anychart.core.ui.Tooltip - Self instance for method chaining.

Try it:

Usage sample