Vue Link Popover

Customisable, flexible, easy to use popover contents for Vue.js similar to that used by Facebook & Twitter

Demos

By default, the popup is shown when the trigger text/content is hovered upon

The Man James Bond

Royal Navy Commander James Bond, CMG, RNVR, is a fictional character created by British journalist and novelist Ian Fleming in 1953. He is the protagonist of the James Bond series of novels, films, comics and video games. Fleming wrote twelve Bond novels and two short story collections, although the last two books—The Man with the Golden Gun and Octopussy and The Living Daylights—were published posthumously.

Installation

Get up and running with Vue-Link-Popover

In a Vue.js project, install with npm install --save vue-link-popover.

For browser based environments, download popover.js or use it from a CDN:
<script src="https://unpkg.com/vue-link-popover/popover.js"><script>

Optionally but recommended, include the default stylings by either copying & tweaking the styles in themes/default.css or by including it via CDN - <link rel="stylesheet" href="https://unpkg.com/vue-link-popover/themes/default.css" />

Usage

For browser environments, the plugin is automatically initialized with the default options so it can be used immediately with the <link-popover> tag.

Import it as a component:

              
                import LinkPopover from 'vue-link-popover'
// Register component components: { LinkPopover }
To use it globally, import it from the package & then register it:
              
                import Vue from 'vue' 
import 'vue-link-popover/themes/default.css'
import LinkPopover from 'vue-link-popover'
Vue.component('link-popover', LinkPopover)
Importing it globally allows the passing of customisation options such as transitionName & custom themes. For example: Vue.use(LinkPopover, { theme: 'snow-white', transitionName: 'my-awesome-transition'})

Available Options

  • click By default, the popover shows when hovered upon, however, you can change this behaviour to open the popup only when the click parameter is passed. Unlike the other options, this is used right on the popup container. For example, Opens the popover click.
    Opened on click
  • transitionName; This is the name of the transition to be used. See the VueJS animation guide for how to use animations in Vue
  • theme: This is the root class of the popup which you can use to easily customise the popup. For example, passing a theme variable of 'snow-white' can be used like this when styling:
                    
                      .snow-white.popover {
                        // Popup container
    
                        &__text {
                          // Visible text shown in browser
                        }
    
                        &__content {
                          // Hidden popover content container                    }
                      }