Search results

TooltipDataModel API in React Slider API component

Interface for a class TooltipData

Properties

cssClass

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.

format

string

It is used to customize the Tooltip content to the desired format using internationalization or events (custom formatting).

isVisible

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>
    );
  }
}

placement

TooltipPlacement

It is used to denote the position for the tooltip element in the Slider. The available options are:

  • Before - Tooltip is shown in the top of the horizontal slider bar or at the left of the vertical slider bar.
  • After - Tooltip is shown in the bottom of the horizontal slider bar or at the right of the vertical slider bar.

showOn

TooltipShowOn

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>
    );
  }
}