Set tool tip to the commands in Vue Toolbar component
11 Jun 20244 minutes to read
The tooltipText
property of the Toolbar item is used to set the HTML Tooltip to the commands that can be viewed as hint texts on mouse hover.
To change the tooltipText
to ej2-tooltip component:
- Import the
Tooltip
module fromej2-popups
,and initialize the Tooltip with the Toolbar target. Refer to the following code example:
<template>
<div id="app">
<div id='Tooltip' :created="oncreated">
<ejs-toolbar>
<e-items>
<e-item text='Cut'></e-item>
<e-item text='Copy'></e-item>
<e-item text='Paste'></e-item>
<e-item type='Separator'></e-item>
<e-item text='Bold'></e-item>
<e-item text='Italic'></e-item>
<e-item text='Underline'></e-item>
</e-items>
</ejs-toolbar>
</div>
</div>
</template>
<script setup>
import { ToolbarComponent as EjsToolbar, ItemsDirective as EItems, ItemDirective as EItem } from "@syncfusion/ej2-vue-navigations";
import { Tooltip } from "@syncfusion/ej2-popups";
const oncreated = () => {
var tooltip = new Tooltip({ target: '#Toolbar', content: 'This is Toolbar' });
tooltip.appendTo('#Tooltip');
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
</style>
<template>
<div id="app">
<div id='Tooltip' :created="oncreated">
<ejs-toolbar>
<e-items>
<e-item text='Cut'></e-item>
<e-item text='Copy'></e-item>
<e-item text='Paste'></e-item>
<e-item type='Separator'></e-item>
<e-item text='Bold'></e-item>
<e-item text='Italic'></e-item>
<e-item text='Underline'></e-item>
</e-items>
</ejs-toolbar>
</div>
</div>
</template>
<script>
import { ToolbarComponent, ItemDirective, ItemsDirective } from "@syncfusion/ej2-vue-navigations";
import { Tooltip } from "@syncfusion/ej2-popups";
export default {
name: "App",
components: {
"ejs-toolbar": ToolbarComponent,
"e-items": ItemsDirective,
"e-item": ItemDirective
},
methods: {
oncreated: function () {
var tooltip = new Tooltip({ target: '#Toolbar', content: 'This is Toolbar' });
tooltip.appendTo('#Tooltip');
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
</style>
<button class="preview-sample-button" id="PreviewSampleButton-gubohx6wu2k5t2rzivuj5fiwvfqjg3pl" onclick="LoadPreviewSample('https://ej2.syncfusion.com/vue/documentation/code-snippet/toolbar/how-to/Tooltip-cs1',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-gubohx6wu2k5t2rzivuj5fiwvfqjg3pl" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/vue/documentation/code-snippet/toolbar/how-to/Tooltip-cs1');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png"/><span class="stackblitz-text">Open in Stackblitz</span></button>