@citygro/vue-popper

    1.0.2 • Public • Published

    @citygro/vue-popper

    VueJS popover component based on popper.js

    installation

    yarn add @citygro/vue-popper
    npm install @citygro/vue-popper
    import VuePopper from '@citygro/vue-popper'
     
    Vue.use(VuePopper, {
      // default options
      // see <https://popper.js.org/popper-documentation.html#Popper>
    })
     
    // ...
     
    const app = new Vue({
      render () {
        return (
          <div id='myApp'>
            <App />
            {/* required: allows poppers to hover above and outside any parent element */}
            <popper-portal />
          </div>
        )
      },
      // ...
    })

    usage

    <template>
      <a
        class="help-bubble"
        @mouseenter="handleEnter"
        @mouseleave="handleLeave"
      >
        <i class="fa fa-info-circle" />
        <popper
          :options="popperOptions"
          :visible="visible"
        >
          <span>
            My helpful content!
          </span>
        </popper>
      </a>
    </template>
     
    <script>
    export default {
      data () {
        return {
          visible: false,
          popperOptions: {
            // instance-specific options
          }
        }
      },
      methods: {
        handleEnter () {
          this.visible = true
        },
        handleLeave () {
          setTimeout(() => {
            this.visible = false
          }, 200)
        }
      }
    }
    </script>

    license

    Apache 2.0

    Install

    npm i @citygro/vue-popper

    DownloadsWeekly Downloads

    9

    Version

    1.0.2

    License

    Apache-2.0

    Unpacked Size

    163 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar
    • avatar