Navigator Prefabricating Marinates

    vue-js-popover

    1.2.1 • Public • Published

    npm version

    Vue.js popover

    Live demo here

    Install:

    npm install vue-js-popover --save

    Import:

    import Vue from 'vue'
    import Popover from 'vue-js-popover'
     
    Vue.use(Popover)

    Use:

    <button v-popover:foo>Toggle popover</button>
     
    <popover name="foo">
      Hello
    </popover>

    Or:

    <button v-popover="{ name: 'foo' }">Toggle popover</button>

    Tooltip

    Plugin contains a simple wrapper for Tooltip. To use it you will have to:

    Set tooltip flag in your main.js:

    import VPopover from 'vue-js-popover'
    Vue.use(VPopover, { tooltip: true })

    Include tooltip component anywhere in the application:

    <tooltip />

    Assign message to any element:

    <button v-popover:tooltip="'This is a string value'">My butt0n</button>

    Props

    Name Type Required Description
    name String + ...
    width Number - ...
    transition String - ...
    pointer Boolean - If set - will show a tiny tip
    event "click" | "hover" - Type of event that will trigger showing of the popover
    delay Number - Delay in milliseconds

    Positioning

    You can use .left, .right, .top, .bottom modifiers to set the position of the popover.

    Example:

    <button v-popover:info.right>Edit (show popover right)</button>
     
    <button v-popover.left="{ name: 'info' }">Edit</button>

    Styling

    Popover components have data-popover="name" argument that allows to apply styles to it.

    Example:

    <popover name="foo" :pointer="false">Bar</popover>
    [data-popover='foo'] {
      background: #444;
      color: #f9f9f9;
     
      font-size: 12px;
      line-height: 1.5;
      margin: 5px;
    }

    Install

    npm i vue-js-popover

    DownloadsWeekly Downloads

    6,232

    Version

    1.2.1

    License

    MIT

    Unpacked Size

    78.5 kB

    Total Files

    14

    Last publish

    Collaborators

    • euvl