init

src/components/Popover.module.less

@@ -0,0 +1,32 @@
+.arrow, .arrow::before {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: inherit;
+}
+
+.arrow {
+  visibility: hidden;
+}
+
+.arrow::before {
+  visibility: visible;
+  content: '';
+  transform: rotate(45deg);
+}
+
+.tooltip[data-popper-placement^='top'] > .arrow {
+  bottom: -4px;
+}
+
+.tooltip[data-popper-placement^='bottom'] > .arrow {
+  top: -4px;
+}
+
+.tooltip[data-popper-placement^='left'] > .arrow {
+  right: -4px;
+}
+
+.tooltip[data-popper-placement^='right'] > .arrow {
+  left: -4px;
+}

src/components/Popover.tsx

@@ -0,0 +1,40 @@
+import {PropsWithChildren, useState} from 'react'
+import {Modifier, usePopper} from 'react-popper'
+import popoverStyles from './Popover.module.less'
+import * as PopperJS from '@popperjs/core'
+import classNames from 'classnames'
+
+interface Props extends PropsWithChildren {
+  /**
+   * 用于定位弹出框的元素
+   */
+  refElement: Element | PopperJS.VirtualElement | null
+  className?: string | undefined
+  arrowClassName?: string | undefined
+  options?: Omit<Partial<PopperJS.Options>, 'modifiers'> & {
+    createPopper?: typeof PopperJS.createPopper
+    modifiers?: ReadonlyArray<Modifier<any>>
+  }
+}
+
+const Popover = (props: Props) => {
+  const {children, className, arrowClassName, refElement, options} = props
+
+  const [popperElement, setPopperElement] = useState<any>(null)
+  const [arrowElement, setArrowElement] = useState<any>(null)
+  const { styles, attributes } = usePopper<any>(refElement, popperElement, {
+    placement: 'top',
+    modifiers: [
+      {name: 'arrow', options: {element: arrowElement}},
+      {name: 'offset', options: {offset: [0, 8]}},
+    ],
+    ...options??{},
+  })
+
+  return <div className={classNames(popoverStyles.tooltip, className)} ref={setPopperElement} style={styles.popper} {...attributes.popper}>
+    <div className={classNames(popoverStyles.arrow, arrowClassName)} data-popper-arrow ref={setArrowElement} style={styles.arrow} />
+    {children}
+  </div>
+}
+
+export default Popover