Getting Started

23 Mar 20232 minutes to read

The following section explains the required steps to build the simple Tooltip component with its basic usage in step-by-step procedure.

Prerequisites

System requirements for Syncfusion Vue UI components

Installation and configuration

• You can use Vue CLI to setup your vue applications. To install Vue CLI use the following command.

    npm install -g @vue/cli
    npm install -g @vue/cli-init

• To setup basic sample use the following Vue CLI commands.

    vue init webpack-simple quickstart
  
    cd quickstart
  
    npm install

• Install Syncfusion Tooltip packages using below command.

    npm install @syncfusion/ej2-vue-popups --save

Registering Tooltip component using Vue.use()

Import the Tooltip Plugin from the Essential JS 2 Vue package and register the same using Vue.use() with Component Plugin as its argument.

Refer to the code snippet given below.

import { TooltipPlugin } from "@syncfusion/ej2-vue-popups";

Vue.use(TooltipPlugin);

By registering component plugin in Vue, all child directives are also globally registered. We can also use Vue.Component() to register Tooltip. Refer here to know more about component registration.

Initialize Tooltip

Add the EJ2 Vue Tooltip using <ejs-tooltip> to the <template> section of the App.vue file in src directory.

<template>
    <div id="app">
    <ejs-tooltip ref="tooltip" content='Tooltip content' >
            <span>Show Tooltip</span>
        </ejs-tooltip>
  </div>
</template>
<script>
import Vue from "vue";
import { TooltipPlugin } from "@syncfusion/ej2-vue-popups";
Vue.use(TooltipPlugin);

export default {
  data() {
    return { };
  }
}
</script>

Adding CSS Reference

Add Tooltip component’s styles as given below in <style> section of the App.vue file.

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
</style>

We can also use CRG to generate combined component styles.

Run the application

Now run the npm run dev command in the console, it will build your application and open in the browser.

The following example shows a basic Tooltip.

app.vue

<template>
  <div id="app">
    <div id='container'>
      <ejs-tooltip class="tooltipcontainer" content='Tooltip content' target="#target">
        <div style="display: inline-block; position: relative; left: 50%;top: 100px;transform: translateX(-50%);">
          <ejs-button id='target'>Show Tooltip</ejs-button>
        </div>
      </ejs-tooltip>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { TooltipPlugin } from "@syncfusion/ej2-vue-popups";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
Vue.use(TooltipPlugin);
Vue.use(ButtonPlugin);

export default {
}
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
</style>

See Also

Positioning Tooltip

Tooltip Open Mode

Customize the Tooltip