Popover-vue

This is a Vue 3 component used to create a popover with customizable options such as placement, trigger on hover, arrow display, and control over its manual showing/hiding. It also has events for when the Popover is opened or hidden, and a slot for adding custom content to the Popover.

DOCUMENTATION

DEMO

Installation

First step is to install it using yarn or npm:

yarn add popover-vue

or

npm i popover-vue

Usage

<template>
  <Popover>
    <button>Button</button>
    <template #content>
      <div>content</div>
    </template>
  </Popover>
</template>

<script>
import Popover from "popover-vue";

export default {
  components: { Popover },
};
</script>

Props

| Name | Type | Default | Description | | ----------- | ------- | -------- | ----------------------------------------------------------------------------------------------------------------------- | | placement | String | bottom | Sets the preferred placement of the Popover. | | hover | Boolean | false | Sets whether the Popover is triggered on hover or not. | | arrow | Boolean | false | Sets whether to display an arrow on the Popover or not. | | disabled | Boolean | false | Disables the Popover and hides it if it was already open. | | show | Boolean | null | Sets whether the Popover is shown or hidden manually, ignoring other events (click, hover) if set to true or false. |

Events

| Name | Description | | --------------- | ------------------------------------- | | open:popover | Triggered when the Popover is opened. | | close:popover | Triggered when the Popover is hidden. |

Slots

| Name | Description | | --------- | ---------------------------------------------- | | content | Used for adding custom content to the Popover. |

Slot Props

The content slot provides the following variables and functions:

| Name | Type | Description | | -------- | -------- | ---------------------------------------- | | close | Function | A function to close the Popover. | | isOpen | Boolean | Returns the open state of the Popover. |