如何为react-tooltip添加边框并移除默认箭头？

根据你使用的组件版本不同，实现方式略有区别，以下是两种最常用版本的可直接复用方案：

v5.x 及以上版本（当前主流安装版本） #

这个版本原生支持箭头开关配置，不需要写额外CSS hack：

• 移除默认箭头：直接给Tooltip组件传入arrow={false}属性即可
• 添加边框：通过自定义CSS类或者行内样式传入边框配置即可

代码示例：

import { Tooltip } from 'react-tooltip';
import 'react-tooltip/dist/react-tooltip.css';

function Demo() {
  return (
    <>
      <button data-tooltip-id="tip1" data-tooltip-content="这是自定义的提示框">
        鼠标悬停查看
      </button>
      <Tooltip
        id="tip1"
        arrow={false} // 关闭默认箭头
        className="custom-tooltip-style"
      />
    </>
  )
}

对应CSS样式：

.custom-tooltip-style {
  /* 自定义边框配置，可自行调整粗细、颜色、圆角 */
  border: 1px solid #3b82f6;
  border-radius: 6px;
  /* 可根据边框调整背景、文字颜色，让视觉效果更协调 */
  background: #fff;
  color: #1e293b;
  padding: 8px 12px;
}

注意：如果样式不生效，可适当提升CSS选择器优先级，必要时添加!important覆盖组件默认样式

v4.x 旧版本 #

旧版本没有提供箭头开关的原生属性，需要通过CSS隐藏默认箭头元素，再添加边框：

import ReactTooltip from 'react-tooltip';

function Demo() {
  return (
    <>
      <button data-tip="这是旧版自定义提示框" data-for="tip2">
        鼠标悬停查看
      </button>
      <ReactTooltip
        id="tip2"
        className="old-custom-tooltip"
        arrowColor="transparent"
      />
    </>
  )
}

对应CSS样式：

/* 隐藏默认箭头元素 */
.old-custom-tooltip::before,
.old-custom-tooltip::after {
  display: none !important;
}
/* 自定义边框样式 */
.old-custom-tooltip {
  border: 1px solid #3b82f6 !important;
  background: #fff !important;
  color: #1e293b !important;
  box-shadow: none !important; /* 移除默认阴影避免和边框效果冲突 */
}

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