Search code examples
reactjstooltipreact-bootstrap

Missing arrow on tooltip in react-bootstrap

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.

Solution

  • 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.