# popover-helper

> popover-helper

Latest version **3.0.2** (published 2025-08-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install popover-helper
pnpm add popover-helper
yarn add popover-helper
bun add popover-helper
```

## Health

**Score 30/100 (F)** — status: maintenance-mode.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.2 |
| Published | 2025-08-11 |
| First published | 2020-07-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 65.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | cenfun |

## Links

- npm: https://www.npmjs.com/package/popover-helper
- Repository: https://github.com/cenfun/popover-helper
- Homepage: https://github.com/cenfun/popover-helper#readme
- Issues: https://github.com/cenfun/popover-helper/issues
- npm.io page: https://npm.io/package/popover-helper

## Recent versions

- 3.0.2 (latest) — 2025-08-11
- 3.0.1 — 2025-08-08
- 3.0.0 — 2025-08-07
- 2.0.5 — 2024-12-13
- 2.0.4 — 2024-12-04
- 2.0.3 — 2023-03-30
- 2.0.2 — 2023-03-30
- 2.0.1 — 2023-03-29
- 2.0.0 — 2023-03-28
- 1.0.3 — 2023-03-05
- 1.0.2 — 2022-08-05
- 1.0.1 — 2022-08-05
- 1.0.0 — 2020-07-21

## README

# Popover Helper
## Preview
[https://cenfun.github.io/popover-helper](https://cenfun.github.io/popover-helper)

## Install
```sh
npm i popover-helper
```

## Usage
```js
import { getRect, getBestPosition, getPositionStyle } from "popover-helper";

const $popover = document.querySelector('.popover');
let positionInfo;

const update = () => {
    //get 3 rect for calculation
    const containerRect = getRect('.container');
    const targetRect = getRect('.target');
    const popoverRect = getRect('.popover');
    const positions = [];

    positionInfo = getBestPosition(
        containerRect,
        targetRect,
        popoverRect,
        //allowed positions
        positions,
        //previous position info
        positionInfo
    );

    //console.log(positionInfo);
    if (positionInfo.changed) {
        $popover.style.left = `${positionInfo.left}px`;
        $popover.style.top = `${positionInfo.top}px`;
    }

    const style = getPositionStyle(positionInfo, {
        bgColor: "#fff",
        borderColor: "#ccc",
        arrowSize: 10,
        borderRadius: 5
    });
    // performance optimized
    if (style.changed) {
        $popover.style.background = style.background;
        $popover.style.padding = style.padding;
    }
};

update();

```
see [/public/index.html](/public/index.html)

## CHANGELOG

- 3.0.1
    - added: align to start/end

- 3.0.0
    - new feature: align to target
    - new feature: better padding calculation

- 2.0.5
    - added argument `fixed` for `getRect(target, fixed)`

- 2.0.4
    - fixed arrow size (#1)

- 2.0.3
    - fixed performance issue

- 2.0.0
    - replaced css arrow with svg background

- 1.0.3
    - added color to css
    - fixed positions sort issue

---
_Source: https://npm.io/package/popover-helper · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._