The Ultimate Guide to React-Bootstrap Hover Effects (3 Demos!)

Hover effects are important for creating a perfect UI design. React-Bootstrap offers several methods of adding hover effects on components. In this tutorial we will add hover effects to a Card component using CSS, React hooks, and the OverlayTrigger component.

Here’s what we will build:

In the screenshot above I triggered hover effects on three subcomponents at once using Chrome dev tools. The Card.Header is getting custom background color and increased font size, the Avatar has a Tooltip, and the Card.Title is getting highlighted with custom color and background color.

Full code for this tutorial is in the Resources section.

React-Bootstrap Add Hover Effects to Card With CSS

The simplest way to add hover styling to a component in React-Bootstrap is using the :hover pseudo-class that the browser automatically applies. However, we need to explore dev tools to see what classes React-Bootstrap is using to “create” a component.

Here’s a screenshot of the DOM with the card-title component highlighted:

I did not add the card-title class. When we use the <Card.Title> component, it renders as a div with class card-title. We can then target this class in our .scss file:

.card-title:hover {
  background-color: $success;
  font-size: 1.5rem;
  color: white;
  border-radius: 4px;
}

Now on hover of the Card.Title component we will have custom background color, font size, text color, and border radius.

Here’s a tutorial all about hover on Bootstrap Buttons and here’s how to add hover styling to the React-Bootstrap form control.

React-Bootstrap Add Hover Effects to Card With Dynamically Applied Classes

Another method for adding custom styling on hover in React-Bootstrap is to use React hooks to track whether a component is currently being hovered over:

<Card.Header
  className={`${hovered? "hovered-header" : ""} d-flex justify-content-between`}
  onMouseOver={() => setHovered(!hovered)}
  onMouseOut={() => setHovered(!hovered)}
>

I have some Bootstrap flex utility classes always applied to the Card.Header component. However, the hovered-header class is only applied when the hovered state class is true. The hovered-header class applies the following styling:

.hovered-header {
  background-color: $primary;
  font-size: 3.5rem;
}

This tutorial has everything to know about images in React-Bootstrap Cards.

React-Bootstrap Add Hover Effects to Card Icon With OverlayTrigger Component

React-Bootstrap has an Overlay and OverlayTrigger component for adding Popups on hover. The OverlayTrigger is easier to use, and I have a demo of using both here.

In this tutorial, I wrapped my Avatar component with the OverlayTrigger component. It handles hover detection. I passed overlay prop a component to render as the Popup next to the Avatar.

<OverlayTrigger
  placement="right"
  delay={{ show: 0, hide: 100 }}
  overlay={renderTooltip}
>
  <div className="rounded-circle avatar text-center">A</div>
</OverlayTrigger>

Notice that even when I am hovering over the avatar, the hover event is bubbling up and triggering the Card.Header hover. This means we see the custom hover events for both components happen when avatar is hovered.

Resources

We can also add hover effects to icons in Bootstrap (here’s a demo).

Here is the full code for this tutorial:

//HoverCard.tsx
import { useState } from "react";
import Card from 'react-bootstrap/Card';
import OverlayTrigger from "react-bootstrap/OverlayTrigger";
import Tooltip from "react-bootstrap/Tooltip";
import { TooltipProps } from "react-bootstrap/Tooltip";
import "./HoverCard.scss";

export default function HoverCard() {
  const [hovered, setHovered] = useState(false);
  const renderTooltip = (props: TooltipProps) => (
    <Tooltip id="button-tooltip" {...props}>
      Avatar Tooltip
    </Tooltip>
  );

  return (
    <Card>
      <Card.Header
        className={`${hovered ? "hovered-header" : ""} d-flex justify-content-between`}
        onMouseOver={() => setHovered(!hovered)}
        onMouseOut={() => setHovered(!hovered)}
      >
        <div>Header Text</div>
        <OverlayTrigger
          placement="right"
          delay={{ show: 0, hide: 100 }}
          overlay={renderTooltip}
        >
          <div className="rounded-circle avatar text-center">A</div>
        </OverlayTrigger>
      </Card.Header>
      <Card.Body>
        <Card.Title>Title Text</Card.Title>
        <Card.Text>
          Body Text
        </Card.Text>
      </Card.Body>
    </Card>
  );
}

//HoverCard.scss
@import "bootstrap/scss/bootstrap";

.card-header {
  font-size: 3rem
}

.hovered-header {
  background-color: $primary;
  font-size: 3.5rem;
}

.avatar {
  color: $success;
  background-color: grey;
  width: 5rem;
  height: 5rem;
}

.card-title:hover {
  background-color: $success;
  font-size: 1.5rem;
  color: white;
  border-radius: 4px;
}

.card-body {
  min-width: 500px;
}