next-popover

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

中文文档

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

Name	Type	Default	Description
trigger	HTMLElement		Required. The trigger element
content	HTMLElement | string | number		Required. The content element to be popped up
appendTo	HTMLElement	document.body	The element to append the popover to.
placement	top left right bottom top-left top-right bottom-left bottom-right left-top left-bottom right-top right-bottom	top	The placement of the popover.
showArrow	Boolean	true	Whether to show arrow
emit	click or hover	click	Trigger emit type
open	boolean		Whether to open the popover box by default
openDelay	number	100	Open delay
closeDelay	number	100	Close delay
offset	number	8	Popover offset
enterable	boolean	true	When emit is set to hover, can the mouse enter the popover
disabled	boolean		Disabled
clickOutsideClose	boolean	true	Automatically close the popover when clicking outside
closeOnScroll	boolean		Whether to automatically close the popover when the trigger element is scrolled.
triggerOpenClass	string		The class added to the trigger when the popover is opened.
wrapperClass	string		The class added to the popoverWrapper.
animationClass	string		The CSS animation class name.
onBeforeEnter	() => void		Called before the CSS enter animation starts.
onEntered	() => void		Called when the CSS enter animation ends.
onBeforeExit	() => void		Called before the CSS exit animation starts.
onExited	() => void		Called when the CSS exit animation ends.
onOpen	() => void		Called when the popover is opened.
onClose	() => void		Called when the popover is closed.

Instance properties

Name	Type	Description
config	PopoverConfig	Popover configuration object
popoverRoot	HTMLElement	The popover root element
popoverWrapper	HTMLElement	The popover wrapper element
popoverContent	HTMLElement	The popover Content element
arrowElement	HTMLElement	The popover arrow element
opened	boolean	Indicates whether the popover is currently displayed

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;