# @beisen-phoenix/popover

> 点击/鼠标移入元素，弹出气泡式的卡片浮层。

Latest version **3.3.55** (published 2019-11-25) · ISC license · 0 weekly downloads

## Install

```sh
npm install @beisen-phoenix/popover
pnpm add @beisen-phoenix/popover
yarn add @beisen-phoenix/popover
bun add @beisen-phoenix/popover
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.3.55 |
| Published | 2019-11-25 |
| First published | 2019-03-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 87.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | beisencorp |

## Links

- npm: https://www.npmjs.com/package/@beisen-phoenix/popover
- npm.io page: https://npm.io/package/@beisen-phoenix/popover

## Dependencies (2)

- [rc-tooltip](https://npm.io/package/rc-tooltip.md) ^3.7.3
- [@beisen-phoenix/style-token](https://npm.io/package/@beisen-phoenix/style-token.md) ^3.3.55

## Recent versions

- 3.3.55 (latest) — 2019-11-25
- 3.2.44-rc.1 (rc) — 2019-10-24
- 3.3.54 — 2019-11-25
- 3.3.53 — 2019-11-25
- 3.3.52 — 2019-11-24
- 3.3.51 — 2019-11-23
- 3.3.50 — 2019-11-22
- 3.3.49 — 2019-11-22
- 3.3.48 — 2019-11-22
- 3.3.47 — 2019-11-22
- 3.3.46 — 2019-11-22
- 3.3.45 — 2019-11-21
- 3.3.43 — 2019-11-21
- 3.3.42 — 2019-11-21
- 3.3.41-beta.1 — 2019-11-21
- … 346 more at https://npm.io/package/@beisen-phoenix/popover/versions

## README

点击/鼠标移入元素，弹出气泡式的卡片浮层。

## 概述

当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。

和 Tooltip 的区别是，用户可以对浮层上的元素进行操作，因此它可以承载更复杂的内容，比如链接或按钮等。

## API

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| content | 卡片内容。 | string|ReactNode | 无 |
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | `true` |
| defaultVisible | 默认是否显隐 | boolean | `false` |
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | Function(triggerNode) | () => document.body |
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0 |
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 |
| extraCls | 卡片类名 | string | 无 |
| overlayStyle | 卡片样式 | object | 无 |
| placement | 气泡框位置，可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | top |
| trigger | 触发行为，可选 `hover/focus/click/contextMenu` | string | hover |
| visible | 用于手动控制浮层显隐 | boolean | `false` |
| onVisibleChange | 显示隐藏的回调 | (visible) => void | 无 |
| align | 该值将合并到 placement 的配置中，设置参考 [rc-tooltip](https://github.com/react-component/tooltip) | Object | 无 |
| isClearInnerPadding | 是否清除组件自身的padding设置，| boolean | false |
| isAutoContentWidth | 是否根据传入内容自定计算组件的宽度，去掉组件默认宽度限制，| boolean | false |
| isAutoContentHeight | 是否根据传入内容自定计算组件的高度，去掉组件默认高度限制，| boolean | false |
| contentWidth | 根据传入宽度设置内容区的宽度，去掉组件默认宽度限制，| number |
| contentHeight | 根据传入高度设置内容区的高度，去掉组件默认高度限制，| number |
| resize | 回调函数，当传入内容宽度高度发生变化时，可以在传入内容组件内部调用this.props.resize() 去重置popover位置。或者可以给popover声明一个ref,当传入内容宽度高度发生变化时，通过ref.resize()去重置popover位置|回调函数|无|


## 注意

请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。

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