Nuxt Popovers

Our Nuxt popovers are a small overlay of content that is used to demonstrate secondary information of any component when it is clicked by a user. For example, you can think about those from iOS’s devices. Now keep reading some examples to see how Nuxt popovers work.

We used, Popover from Element UI and customized the look of it. It’s a really handy component and can be integrated very easily. The Tooltip and Popover components are initialised globally in src/globalComponents.js

import {Popover} from 'element-ui'

Global usage

Vue.use(Popover)

Local usage

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

Simple Popover

<el-popover trigger="hover"
            placement="top">
    <div>
      <h3 class="popover-header">Popover on Top</h3>
      <div class="popover-body">Here will be some very useful information about his popover.</div>
    </div>
   <base-button slot="reference">
     Top
   </base-button>
</el-popover>

Props

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