Tooltip for button in Vue Button component

11 Jun 20241 minute to read

Tooltip can be shown on Button hover and it can be achieved by setting title attribute.

The following snippets illustrates how to show tooltip on Button hover.

<template>
    <ejs-button id='button' isPrimary=true>Button</ejs-button>
</template>

<script setup>
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
document.getElementById('button').setAttribute('title', 'Primary Button');
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

button {
  margin: 25px 5px 20px 20px;
}
</style>
<template>
    <ejs-button id='button' isPrimary=true>Button</ejs-button>
</template>

<script>
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
export default {
name: "App",
components: {
"ejs-button":ButtonComponent
},
  mounted () {
    document.getElementById('button').setAttribute('title', 'Primary Button');
  }
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';

button {
  margin: 25px 5px 20px 20px;
}
</style>