next-popover v0.0.41

next-popover

Next-Popover is a lightweight and simple popover, tooltip, dropdown library, with no other dependencies, and Typescript friendly.

https://vywrrk-3000.csb.app/

中文文档

Install

npm i next-popover

or

yarn add next-popover

or

pnpm add next-popover

or via CDN

<script src="https://unpkg.com/next-popover@latest/dist/popover.umd.js"></script>
<script>
  const { NextPopover } = window;
  const { PlacementType, EmitType } = NextPopover;
  // use `NextPopover.default`
  new NextPopover.default({
    // config
  });
</script>

Usage

import Popover, { PlacementType, EmitType } from 'next-popover'

const trigger = document.querySelector('.trigger'); 

const content = "Hello Next-Popover";
// or
// const content = document.createElement('div'); // You need to pop up the displayed content
// content.classList.add('content');
// content.innerHTML = "Hello Next-Popover";

const appendTo = document.querySelector('.mount-container'); // default: document.body

const popover = new Popover({
  trigger, // required
  content, // required
  appendTo,
  placement: "top", // Set the position of the popover
  emit: "hover" // Set to open the popover when the mouse hovers over the trigger
});

trigger.onclick = () => {
  popover.toggle();
  // or
  // if (popover.opened) {
  //   popover.close();
  // } else {
  //   popover.open();
  // }
}

// if you don't need it anymore
popover.destroy();

CSS Animation

The animationClass parameter allows you to add CSS animations when showing and hiding the popover.

const popover = new Popover({
  animationClass: 'fade'
});

Popover will add the following 6 classes through the animationClass.

`${animationClass}-enter-from` // Starts displaying and is removed in the next frame.
`${animationClass}-enter-active` // Added in the next frame and removed when the animation ends.
`${animationClass}-enter-to` // Added in the next frame and removed when the animation ends.
`${animationClass}-exit-from` // Starts hiding and is removed in the next frame.
`${animationClass}-exit-active` // Added in the next frame and removed when the animation ends.
`${animationClass}-exit-to` // Added in the next frame and removed when the animation ends.
`${animationClass}-${placement}` // Current popover placement

You can write CSS styles like this:

.fade-enter-from,
.fade-exit-to {
  transform: scale(.7);
  opacity: 0;
}
.fade-enter-active,
.fade-exit-active {
  transition: transform .1s ease, opacity .1s ease;
}

Scroll

The closeOnScroll parameter controls whether the popover automatically closes when the trigger element is scrolled.

Hook

Popover provides rich hook functions that can execute code during various stages of the popover's lifecycle.

new Popover({
  onBeforeEnter() {
    // Executed before the CSS display animation starts.
  },
  onEntered() {
    // Executed after the CSS display animation completes.
  },
  onBeforeExit() {
    // Executed before the CSS hide animation starts.
  },
  onExited() {
    // Executed after the CSS hide animation completes.
  },
  onOpen() {
    // Executed when the popover is displayed.
  },
  onClose() {
    // Executed when the popover is closed.
  }
});

API

Config

Instance properties

Methods

open()

Open the Popover instance.

open(): void;

close()

Close the Popover instance.

close(): void;

toggle()

Toggle the Popover instance open or close.

toggle(): void;

openWithDelay()

Open the popover after config.openDelay time.

openWithDelay(): void;

closeWithDelay()

Close the popover after config.closeDelay time.

closeWithDelay(): void;

enable()

Enable.

enable(): void

disable()

Disable and close popover.

disable(): void

updateConfig()

Update config.

updateConfig(config: Partial<PopoverConfig>): void;

destroy()

Destroy the Popover instance.

destroy(): void;

onScroll()

Manually trigger the onScroll event.

onScroll(): void;

update()

Manually update the position of the Popover instance.

update(): void;