Popover & Tooltip

Popovers & Tooltips display informative text when users hover over, focus on, or tap an element.

Basic Usage

arrowed, placement & trigger Props：


import Spross from 'spross'

<Spross.Popover popup="This is a popup." trigger="hover" placement="topLeft">
  topLeft
</Spross.Popover>

Inner scrollable

no more getPopupContainer in the past:

Flip & Shift

This is a popup.This is a popup.

This is a popup.

This is a popup.

Self-adaptive height

combine with autoPlacements to maximize space. It’s very important that flip will be replaced by autoPlacement:

name 1

name 2

name 3

name 4

name 5

name 6


import Spross from 'spross';

const [maxHeight, setMaxHeight] = useState(0);

<Spross.Popover
  autoPlacements={['topRight', 'bottomRight']}
  size={({ availableHeight }) => {
    setMaxHeight(availableHeight - 30);
  }}
  popupStyle={{ padding: 0 }}
  popup={
    <div className="w-[200px] overflow-auto scrollbar-custom" style={{ maxHeight }}>
      {Array.from({ length: 6 }).map((_, index) => (
        <div key={index} className="flex items-center pl-2 h-9">
          name {index + 1}
        </div>
      ))}
    </div>
  }
/>

Controlled

visible & onVisibleChange Props:


import Spross from 'spross'

// true
const [visible, setVisible] = useState(true);

<Spross
  popup="This is a popup."
  visible={visible}
  onVisibleChange={(bool, e, reason) => {
    setVisible(bool);
  }}
>
  controlled
</Spross>

API

Props	Description	Type	Default
arrowed	Whether to show the arrow	boolean	true
children	The child element	React.ReactNode	undefined
mouseEnterDelay	The delay time for mouseEnter, unit: s, only effective when trigger="hover"	number	undefined
mouseLeaveDelay	The delay time for mouseLeave, unit: s, only effective when trigger="hover"	number	undefined
offset	The offset	number \| { mainAxis?: number; crossAxis?: number; alignmentAxis?: number \| null }	undefined
onVisibleChange	The handler when the display changes	(visible: boolean, e?: Event, reason?: OpenChangeReason) => void	undefined
placement	The position of the popup	"top" \| "left" \| "right" \| "bottom" \| "topLeft" \| "topRight" \| "bottomLeft" \| "bottomRight" \| "leftTop" \| "leftBottom" \| "rightTop" \| "rightBottom"	top
popup	The content of the popup	React.ReactNode	undefined
popupClassName	The className of the popup content	string	undefined
popupStyle	The style of the popup content	React.CSSProperties	undefined
portal	Whether to use portal to render to body	boolean	true
size	Adapt to size, the component will push out the available space, and the business side needs to use it by itself	(availableWidth: number, availableHeight: number) => void	undefined
trigger	The trigger method	"hover" \| "focus" \| "click"	hover
visible	The outer control whether to display	boolean	undefined
zIndex	Set z-index	number \| string	undefined