We are all well-known about React which is a JavaScript library used to build dynamic and reusable user interfaces.It helps developers create components that update automatically when data changes and much more. What made me really interested and made curious about learning this is REACT-BOOTSTRAP.

Bootstrap is a popular, open-source front-end framework that provides pre-written HTML, CSS, and JavaScript components for building responsive, websites quickly and efficiently. React-Bootstrap is a complete re-implementation of Bootstrap components using React. So, this React-Bootstrap made me to know about these transitions, tabs and other features and made me to work on that.

Which made me curious and exciting? I am writing a code for the things which I’m using in my daily-day-life. Here, I would like to share a component in this blog. I will detail how to import and use them and where all being used in real applications.

First, React-Bootstrap should be installed in the project you are working. Direct to your page by using

cd your-project-name

Then type the command

npm install react-bootstrap bootstrap

In-order to use them in your code one should import the specific component. The below is a small example of using button.

import Button from 'react-bootstrap/Button';

function TypesExample() {
  return (
    <>
      <Button variant="primary">Primary</Button>  
    </>
  );
}
export default TypesExample;

Now lets have a look into a new component known as OverlayTrigger. This component works when we trigger it by clicking or hovering over a text or icon. Overlay works as the base component for tool-tip ,popover and many more.

Tooltip:

import Button from 'react-bootstrap/Button';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Tooltip from 'react-bootstrap/Tooltip';

function HoverButton() {
  return (
    <OverlayTrigger
      placement="top"
      overlay={<Tooltip id="button-tooltip">Thank you!</Tooltip>}>
      <Button variant="secondary">Hover Me!</Button>
    </OverlayTrigger>
  );
}

export default HoverButton;

Output:

Get Jinetta Shree’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in
• Import necessary components that you are using.
• Create a function and export them, under return statement (where UI used render in this section), using OverlayTrigger component we are using props(where values are passed).
• Placement defines where the hover should be placed, here I have given in the top of the button we can also use it in other sides by using: bottom,left and right.
• Overlay props contains Tooltip component, Tooltip id tells about the unique id for accessing and tracking.
• Use the component which you want to hover with, add that component.
• Export the function and run the program.

It is a tooltip hover over button in GitHub

Popover:

import React from "react";
import { Button, Popover, OverlayTrigger } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

function PopoverExample() {
  const popover =(
    <Popover id="popover-basic">
      <Popover.Header as="h3">Interesting Fact!!</Popover.Header>
      <Popover.Body>
        The National animal of Scotland is Unicorn.
      </Popover.Body>
    </Popover>
  );

  return (
      <OverlayTrigger trigger="click" placement="right" overlay={popover}>
        <Button variant="primary">Click Me!</Button>
      </OverlayTrigger>
  );
}

export default PopoverExample;

Output:

Popover is triggered when clicked and the only difference in popover is creating the function separately and then calling it in overlay props. Since, Overlay is the base component for these they are triggered by hover/click, displays a custom floating container.

Why directly using the tool tip inside the OverlayTrigger component and not the Popover? “Tool-tip is used in hovering small text as giving hint to the users. Popover is a info box which contains header, body tags just like html elements [contains code for 3–4 lines]that pops over when triggered by clicking.

So, for neat and better understanding function is created separately and then called.”

These components are used in every websites and apps. They are mainly used for easy access. Remember using MS Paint and MS Word at small ages by finding each tool by their names, this component helped us a lot. They’re small, but mighty tools every React developer should know.