It illustrates the tooltip data in slider.
string
It is used to customize the Tooltip which accepts custom CSS class names that define specific user-defined styles and themes to be applied on the Tooltip element.
Defaults to ”
string
It is used to customize the Tooltip content to the desired format using internationalization or events (custom formatting).
boolean
It is used to show or hide the Tooltip of Slider Component.
import * as React from "react";
import { SliderComponent, ColorRangeDataModel } from "@syncfusion/ej2-react-inputs";
export default class App extends React.Component<{}, {}> {
public tooltip = { isVisible: true};
render() {
return (
<div id="container">
<div className="wrap">
<SliderComponent id="slider" value={30} tooltip={this.tooltip} />
</div>
</div>
);
}
}
It is used to denote the position for the tooltip element in the Slider. The available options are:
It is used to determine the device mode to show the Tooltip. If it is in desktop, it will show the Tooltip content when hovering on the target element. If it is in touch device. It will show the Tooltip content when tap and holding on the target element.
import * as React from "react";
import { SliderComponent, ColorRangeDataModel, TooltipDataModel } from "@syncfusion/ej2-react-inputs";
export default class App extends React.Component<{}, {}> {
public tooltip: TooltipDataModel = {
isVisible: true,
showOn: "Focus"};
render() {
return (
<div id="container">
<div className="wrap">
<SliderComponent id="slider" value={30} tooltip={this.tooltip} />
</div>
</div>
);
}
}
Defaults to ‘Auto’