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

Question

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

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

在文档中我们可以读到：

Because React-Bootstrap doesn't depend on a very precise version of Bootstrap, we don't ship with any included CSS. However, some stylesheet is required to use these components. 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"
/>

如文档中的解释：

How and which Bootstrap styles you include is up to you, but the simplest way is to include the latest styles from the CDN. A little more information about the benefits of using a CDN can be found here.

Answer 2

显示向下箭头的工具提示

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

.popover{
    .arrow{
        background:transparent !important;
        z-index: 99;
        width: 0; 
        height: 0; 
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-top: 7px solid #c7c7c7;
        bottom: -7px;
    }
}

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

Missing arrow on tooltip in react-bootstrap

tooltip

reactjs

react-bootstrap