How to set tooltip to the commands in Vue Toolbar

03 Sep 20264 minutes to read

The tooltipText property of the Toolbar item is used to set an HTML tooltip for the toolbar commands that can be viewed as hint text on mouse hover.

To replace the tooltipText property with the Tooltip component:

  • Import the Tooltip module from ej2-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-s1zbpz7ahihp1b4gctfv8khfpkvcizs6" 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-s1zbpz7ahihp1b4gctfv8khfpkvcizs6" 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" alt="Stackblitz Support"/><span class="stackblitz-text">Open in Stackblitz</span></button>