You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

vue-use-popperjs

Package Overview
Dependencies
Maintainers
1
Versions
59
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-use-popperjs

Vue 3 popper solution powered by @popperjs


Version published
Maintainers
1
Created

Readme

Source

Vue-use-popperjs

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

npm

CI

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>

About

Buy Me A Coffee

Distributed under the MIT license. See LICENSE for more information.

https://github.com/iendeavor

Keywords

FAQs

Package last updated on 31 May 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc