Default Popup

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

Click Me To Open Popup

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.

Read More

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" />

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                    }
                    }