使用react-bootstrap实现Tooltip时默认箭头不显示的问题

react-bootstrap 属于纯组件逻辑封装库，本身不会内置、打包任何Bootstrap的视觉样式文件，组件所有的默认外观、布局规则、箭头适配逻辑，全部依赖项目手动引入的Bootstrap官方CSS资源。
出现的Tooltip无默认背景、缺失原生箭头的现象，本质就是项目里没有正常加载到Tooltip对应的Bootstrap样式规则，常见触发场景包括：

• 仅安装了react-bootstrap的npm依赖，没有在项目入口（如index.js/main.jsx）引入完整的Bootstrap CSS文件，导致所有依赖类名选择器的组件样式全部丢失
• 引入的Bootstrap CSS版本和当前使用的react-bootstrap版本不匹配，比如react-bootstrap v2.x 要求匹配 Bootstrap v5.x 的样式规则，错配v4及更早版本的样式会出现Tooltip模块规则缺失
• 全局自定义CSS的优先级高于引入的Bootstrap样式，提前重置/覆盖了.tooltip、.tooltip-arrow相关的默认规则，导致原生样式失效

• 安装对应兼容版本的bootstrap样式包，在项目最早加载的入口文件引入完整的Bootstrap压缩样式：

  // 入口文件引入示例
  import 'bootstrap/dist/css/bootstrap.min.css'
  

• 注意样式引入顺序：Bootstrap的官方样式要写在所有自定义业务CSS的前面，避免全局样式提前覆盖基础规则
• 引入完成后即可删除之前自定义的.tooltip基础背景、伪元素箭头代码：原生Tooltip组件会根据配置的placement属性，自动计算对应位置的箭头样式、定位角度、对齐偏移，不需要手动硬编码箭头的位置和样式

目前用伪元素写死的右侧定位箭头，存在明显适配问题：当placement属性切换为上、下、左侧时，箭头位置会完全错位，无法跟随气泡位置自动调整朝向。

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