How to remove arrow tooltip in react-bootstrap

Question

This is my code : I used 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"

This is value in tooltip.

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

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

This is Button when hover.It's will show 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;

I want remove arrow in tooltip.

Answer 1

You can use CSS for this add following line on your CSS file:

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