Missing arrow on tooltip in react-bootstrap

user_12350428 0
Viewed 3518

So I'm using react-bootstrap to implement a tooltip to my react application.

When using their tooltip, im not getting any default styling at all to it. So to solve this I had to add some css, however I can only add some css to the body.

An image to show you what I mean. enter image description here

In my case im missing the arrow. Should the arrow not be there by default?

I've followed the https://react-bootstrap.github.io/components/overlays/ and have followed the examples they've given me.

<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;
}

UPDATE: Solved by creating my own arrow with css:

 .tooltip::after {
    position: absolute;
    left: -7px;
    top: 43%;
    content: '';
    width: 15px;
    height: 15px;
    background: #333;
    transform: rotate(45deg);
}

But it's a temporary solution only, hoping to know why the default arrow isn't displaying.

react-bootstrap reactjs tooltip
3 Answers

In the documentation we can read that:

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.

you can import those stylesheets either like this:

{/* The following line can be included in your src/index.js or App.js file*/}

import 'bootstrap/dist/css/bootstrap.min.css';

Or like this:
directly in the index 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"
/>

like explain in the doc:

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.

user_145225910

For the latest reactstrap (9.1.3) and bootstrap 4 I needed to add the following to my bootstrap import to fix the arrows.

.bs-tooltip-auto {
  &[data-popper-placement^="top"] {
    @extend .bs-tooltip-top;
  }
  &[data-popper-placement^="right"] {
    @extend .bs-tooltip-right;
  }
  &[data-popper-placement^="bottom"] {
    @extend .bs-tooltip-bottom;
  }
  &[data-popper-placement^="left"] {
    @extend .bs-tooltip-left;
  }
}
user_6599890

Tolltip on show down arrow

<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;
    }
}

user_73356970
Related