reactjsreact-bootstrap

How to remove arrow tooltip in react-bootstrap


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.


Solution

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

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