TooltipDataModel

23 Sep 20253 minutes to read

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.

<template>
    <div id="app">
    <ejs-slider id='default' :value='value' :limits='limits' :tooltip='tooltip' :type='type'></ejs-slider>
  </div>
</template>
<script>
import Vue from "vue";
import { SliderPlugin } from "@syncfusion/ej2-vue-inputs";
Vue.use(SliderPlugin);

export default {
  data() {
    return {
        value: [30, 70],
        tooltip: { isVisible: true},
        limits: { enabled: true, minStart: 10, minEnd: 40, maxStart: 60, maxEnd: 90, startHandleFixed: true },
        type: 'Range'
    };
  }
}
</script>
<style>

   #app {
    height: 40px;
    left: 30%;
    position: absolute;
    top: 40%;
    width: 50%;
  }
</style>

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.

<template>
    <div id="app">
    <ejs-slider id="default" :value="value" :limits="limits" :tooltip="tooltip" :type="type"></ejs-slider>
    </div>
</template>
<script>
import Vue from "vue";
import { SliderPlugin } from "@syncfusion/ej2-vue-inputs";
Vue.use(SliderPlugin);

export default {
  data() {
    return {
        value: [30, 70],
        tooltip: { isVisible: true, showOn: "Focus" },
        limits: { enabled: true, minStart: 10, minEnd: 40, maxStart: 60, maxEnd: 90, startHandleFixed: true },
        type: "Range"
    };
  }
}
</script>
<style>

   #app {
    height: 40px;
    left: 30%;
    position: absolute;
    top: 40%;
    width: 50%;
  }
</style>