Interface for a class TooltipData
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.
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.
<div id="default"></div>
import { Slider } from "@syncfusion/ej2-inputs";
let defaultObj: Slider = new Slider({
min: 0, max: 100,
// Set the intial range values for slider
value: [25, 75],
// Set the step value
step: 1,
// Set the type to render range slider
type: "Range",
// Initialize ticks with placement, largestep, smallstep
ticks: { placement: "Before", largeStep: 20, smallStep: 5, showSmallTicks: true },
// Initialize tooltip with placement and showOn
tooltip: { isVisible: true}
});
defaultObj.appendTo("#default");
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.
<div id="default"></div>
import { Slider } from "@syncfusion/ej2-inputs";
let defaultObj: Slider = new Slider({
min: 0, max: 100,
// Set the intial range values for slider
value: [25, 75],
// Set the step value
step: 1,
// Set the type to render range slider
type: "Range",
// Initialize ticks with placement, largestep, smallstep
ticks: { placement: "Before", largeStep: 20, smallStep: 5, showSmallTicks: true },
// Initialize tooltip with placement and showOn
tooltip: { isVisible: true, showOn: "Focus" }
});
defaultObj.appendTo("#default");