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

Question

这是我的代码：我使用了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;

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

Answer 1

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

只需将此样式添加到样式表即可：

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

如果它不起作用，请尝试以下操作：

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

我们试图做的就是覆盖预定义的CSS

检查中

仅显示即可：无显示或仅使颜色透明

Answer 2

为此，您可以使用CSS来在CSS文件中添加以下行：

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