Package Exports

vue-use-popperjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-use-popperjs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Vue-use-popperjs

Vue-popper-js is complete popper solution powered by @popperjs.

Features

Fully customizable popover with hook function
(Vue 3 only) Popper component, with built-in support for Component, Teleport, and Transition

Documentation

To check out live examples and docs, visit here

Installation

Hook only

For vue@2 + @vue/composition-api

$ yarn add vue-use-popperjs@^1 @vue/composition-api

For vue@3:

$ yarn add vue-use-popperjs@^1

Hook + Component

For vue@3:

$ yarn add vue-use-popperjs
# $ yarn add vue-use-popperjs@^2

vue-use-popperjs@^2 only works with vue@3.

Basic Usage

Hook

<template>
  <button ref="button">Hover me!</button>
  <span ref="tooltip">Tooltip</span>
</template>

<script lang="ts">
  import { defineComponent, ref } from "vue";
  import { usePopperjs } from "vue-use-popperjs";

  export default defineComponent({
    setup() {
      const button = ref();
      const tooltip = ref();
      usePopperjs(button, tooltip);

      return { button, tooltip };
    },
  });
</script>

<style scoped>
  .vue-use-popperjs-none {
    display: none;
  }
</style>

Vue-use-popperjs automatically add .vue-use-popperjs-none class to popper when it is hidden, you can add following css to hide poppers:

.vue-use-popperjs-none {
  display: none;
}

Component

<template>
  <Popper reference-is="button" popper-is="span">
    <template #reference>Hover me!</template>
    Tooltip
  </Popper>
</template>

<script lang="ts">
  import { defineComponent } from "vue";
  import { Popper } from "vue-use-popperjs";

  export default defineComponent({
    components: {
      Popper,
    },
  });
</script>

Advanced Usage

Component

<template>
  <Popper
    reference-is="span"
    :reference-props="{ id: 'popcorn' }"
    popper-is="span"
    :popper-props="{ id: 'tooltip' }"
    :teleport-props="{ to: 'body' }"
    :transition-props="{ name: 'fade' }"
    :modifiers="modifiers"
  >
    Tooltip
    <div id="arrow" data-popper-arrow></div>
  </Popper>
</template>

<script lang="ts">
  import { defineComponent } from "vue";
  import { Popper } from "vue-use-popperjs";

  export default defineComponent({
    components: {
      Popper,
    },
    setup() {
      const modifiers = [
        {
          name: "offset",
          options: {
            offset: [0, 8],
          },
        },
      ];

      return { modifiers };
    },
  });
</script>

<style>
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s ease;
  }

  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }

  #popcorn {
    display: inline-block;
    width: 134px;
    height: 120px;
    background-image: url("https://popper.js.org/images/popcorn-box.svg");
  }

  #tooltip {
    display: inline-block;
    background: #643045;
    color: #ffffff;
    font-weight: bold;
    padding: 5px 10px;
    font-size: 13px;
    border-radius: 4px;
  }

  #arrow,
  #arrow::before {
    position: absolute;
    width: 8px;
    height: 8px;
    background: inherit;
  }

  #arrow {
    visibility: hidden;
  }

  #arrow::before {
    visibility: visible;
    content: "";
    transform: rotate(45deg);
  }

  [data-popper-placement^="top"] #arrow {
    bottom: -4px;
  }

  [data-popper-placement^="bottom"] #arrow {
    top: -4px;
  }

  [data-popper-placement^="left"] #arrow {
    right: -4px;
  }

  [data-popper-placement^="right"] #arrow {
    left: -4px;
  }
</style>