react-bootstrap 中工具提示上缺少箭头

Question

所以我使用 react-bootstrap 为我的 React 应用程序实现工具提示。

使用他们的工具提示时，我根本没有得到任何默认样式。所以为了解决这个问题，我不得不添加一些 css，但是我只能在 body 中添加一些 css。

一张图告诉你我的意思。

就我而言，我错过了箭头。默认情况下应该没有箭头吗？

我遵循了 https://react-bootstrap.github.io/components/overlays/ 并遵循了他们给我的示例。

<OverlayTrigger
  placement="right"
  overlay={
    <Tooltip id="tooltip-right">
      Tooltip on <strong>Right</strong>.
    </Tooltip>
  }
>
  <Button variant="secondary">Tooltip on right</Button>
</OverlayTrigger>

CSS

.tooltip {
    background: #333;
    border-radius: 5px;
    padding: 10px;
    color: whitesmoke;
    margin-left: 5px;
}

.tooltip-arrow {
    content: "";
    background: #333;
}

更新：通过使用 css 创建我自己的箭头解决：

 .tooltip::after {
    position: absolute;
    left: -7px;
    top: 43%;
    content: '';
    width: 15px;
    height: 15px;
    background: #333;
    transform: rotate(45deg);
}

但这只是一个临时解决方案，希望知道为什么默认箭头不显示。

Answer 1

在文档中我们可以看到：

<块引用>

因为 React-Bootstrap 不依赖于非常精确的 Bootstrap 版本，我们不附带任何包含的 CSS。然而， 使用这些组件需要一些样式表。 link to the doc part。

您可以像这样导入这些样式表：

{/* The following line can be included in your src/index.js or App.js file*/}

import 'bootstrap/dist/css/bootstrap.min.css';

或者像这样：
直接在索引html中

<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.6.0/css/bootstrap.min.css"
  integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
  crossorigin="anonymous"
/>

喜欢在文档中解释：

<块引用>

如何以及包含哪些 Bootstrap 样式取决于您，但是 最简单的方法是包含来自 CDN 的最新样式。一点 有关使用 CDN 的好处的更多信息，请参见 here。

Answer 2

显示向下箭头提示

<div className="form-check">
  {
   emails && emails.length > 0 && emails.map((item, key) => {
     return (
         <div className="myr-list" key={key}>
         <input className="form-check-input" type="checkbox" checked={checkedEmails[item.email] ? true : false} name={item.email} onChange={props.onInputChange}/>
         <label className="form-check-label">
             {item.name}{" "}
         </label>
         </div>
      )
   })
 }
</div>

<OverlayTrigger overlay={<Tooltip id="tooltip-disabled">Tooltip!</Tooltip>}>
  <span className="d-inline-block">
    <Button style={{ pointerEvents: 'none' }}>
      Disabled button
    </Button>
  </span>
</OverlayTrigger>