Show tooltip on disabled elements and disable tooltip in Vue Tooltip component

11 Jun 20244 minutes to read

By default, tooltips will not be displayed on disabled elements. However, you can enable this behavior by using the following steps:

1. Add a disabled element like the button element into a div whose display style is set to inline-block.
2. Set the pointer event as none for the disabled element (button) through CSS.
3. Initialize the tooltip for outer div element that holds the disabled button element.

Composition API (~/src/App.vue)

<template>
    <div id='app'>
        <ejs-tooltip id='tooltip' :content='content' target='#box'>
            <div id='container'>
                <div id="box" style="display: inline-block;">
                    <ejs-button id='disabledbutton' disabled=true>Disabled button</ejs-button>
                </div>
            </div>
        </ejs-tooltip>
    </div>
</template>

<script setup>

import { TooltipComponent as EjsTooltip } from "@syncfusion/ej2-vue-popups";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";

const content = "Tooltip from disabled element";
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";

#disabledbutton {
    pointer-events: none;
    font-size: 22px;
    padding: 10px;
}

#container {
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 75px;
}
</style>

Options API (~/src/App.vue)

<template>
   <div id='app'>
    <ejs-tooltip id='tooltip' :content='content' target='#box'>
        <div id='container'>
            <div id="box" style="display: inline-block;">
                <ejs-button id='disabledbutton' disabled=true>Disabled button</ejs-button>
            </div>
        </div>
    </ejs-tooltip>
    </div>
</template>

<script>
import { TooltipComponent } from "@syncfusion/ej2-vue-popups";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";

export default {
name: "App",
components: {
"ejs-tooltip":TooltipComponent,
"ejs-button":ButtonComponent
},
  data: function() {
    return {
        content: "Tooltip from disabled element"
    };
  },
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
#disabledbutton {
    pointer-events: none;
    font-size: 22px;
    padding: 10px;
}
#container {
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 75px;
}
</style>