Nuxt Tooltips

A Nuxt tooltip plugin is a small pop-up element that appears while the user moves the mouse pointer over an element.
Keep reading these examples for adding custom tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.

import {Tooltip} from 'element-ui'

Global usage

Vue.use(Tooltip)

Local usage

export default {
  components: {
    [Tooltip.name]: Tooltip
  }
}

Simple tooltip

 <el-tooltip content="Info"
             effect="light"
             :open-delay="300"
             placement="top">
     <base-button>
       Top
     </base-button>
</el-tooltip>

Props

We used Element UI tooltips. For more info check out their docs on how to use tooltips.