React Popper中能否根据Tooltip位置自定义参考元素样式？

当然可行，你可以通过usePopper返回的实际placement值来动态切换容器的背景色，具体实现步骤如下：

1. 从usePopper的返回值中解构出placement（这是Popper计算后的最终定位方向，可能和初始设置的placement不同）
2. 根据placement是否包含top前缀（如top、top-start、top-end），动态设置容器的背景样式

修改后的React组件代码 #

import { useState } from "react";
import { usePopper } from "react-popper";

export default function App() {
  const [containerRef, setContainerRef] = useState(null);
  const [tooltipRef, setTooltipRef] = useState(null);

  const {
    styles: { popper },
    attributes: { popper: popperAttributes },
    placement // 获取Popper计算后的实际定位方向
  } = usePopper(containerRef, tooltipRef, {
    placement: "bottom-start" // 可修改此值测试顶部定位场景
  });

  // 判断tooltip是否处于顶部方向
  const isTopPlacement = placement.startsWith("top");

  return (
    <>
      <div 
        className="container" 
        ref={setContainerRef}
        // 动态切换背景色
        style={{ backgroundColor: isTopPlacement ? "yellow" : "rgb(255, 121, 121)" }}
      >
        Content
      </div>
      <span
        ref={setTooltipRef}
        className="tooltip"
        style={{ ...popper }}
        {...popperAttributes}
      >
        Tooltip
      </span>
    </>
  );
}

调整后的CSS样式代码 #

.container {
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 30px;
  border: 1px solid #000;
  /* 移除固定背景色，改用动态设置 */
}

.tooltip {
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 8px; /* 新增内边距优化显示效果 */
}

关键说明 #

• placement由Popper自动计算，会根据容器与视口的位置自动调整最终定位，用它判断比初始设置的placement更准确
• startsWith("top")可以覆盖所有顶部相关的定位场景（top、top-start、top-end）
• 修改usePopper配置中的placement为top系列值，即可测试背景色切换效果

内容的提问来源于stack exchange，提问作者kekerinho