Search results

TooltipDataModel API in Vue 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.

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

placement

string

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

string

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