@beisen-phoenix/popover

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

Usage no npm install needed!

<script type="module">
  import beisenPhoenixPopover from 'https://cdn.skypack.dev/@beisen-phoenix/popover';
</script>

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	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 事件。