如何在 react-bootstrap 中删除箭头工具提示答案

【问题标题】：How to remove arrow tooltip in react-bootstrap如何在 react-bootstrap 中删除箭头工具提示
【发布时间】：2018-10-09 18:00:44
【问题描述】：

这是我的代码：我使用了https://react-bootstrap.github.io/components/tooltips/

import React from "react"
import {OverlayTrigger, Tooltip} from "react-bootstrap"
import { HeaderPrintContainer, Button} from "../share/header-button-style"

这是工具提示中的值。

const tooltipLove = (
  <Tooltip id="tooltipLove">
     I Love You
  </Tooltip>
)

const tooltipHate = (
  <Tooltip id="tooltipHate">
     I Hate You
  </Tooltip>
)

这是悬停时的按钮。它会显示工具提示

const ButtonLove = () => (
  <HeaderPrintContainer>
    <OverlayTrigger placement="top" overlay={tooltipLove}>
      <Button bsStyle="default">Love</Button>
    </OverlayTrigger>
    <OverlayTrigger placement="top" overlay={tooltipHate}>
      <Button bsStyle="default">Hate</Button>
    </OverlayTrigger>
  </HeaderPrintContainer>
)

export default ButtonLove;

我想删除工具提示中的箭头。

【问题讨论】：

标签： reactjs react-bootstrap

【解决方案1】：

您可以使用 CSS 在您的 CSS 文件中添加以下行：

.tooltip-arrow {
    display: none !important;
}

【讨论】：

【解决方案2】：

尝试在某些浏览器中检查您的代码

只需将此样式添加到您的样式表中：

.tooltip.top .tooltip-arrow {
    border-top-color: transparent;
}

如果它不起作用，试试这个：

.tooltip.top .tooltip-arrow {
    border-top-color: transparent !important;
}

我们正在尝试做的只是覆盖预定义的 CSS

检查期间

只做 if display: none 或只让颜色透明

【讨论】：