@legendarymediatv/bootstrap/InfoIcon/InfoIcon.js

additional Bootstrap-based React components for extending functionality to react-bootstrap and gatsby

// dependencies
import React from "react";
import { combine, prepare } from "../functions";

// components
import Button from "react-bootstrap/Button";
import Icon from "../Icon";
import OverlayTrigger from "react-bootstrap/OverlayTrigger";
import Popover from "react-bootstrap/Popover";

// styling
import "./InfoIcon.css";

const InfoIcon = (props) => {
  // prepare properties
  const [properties, children] = prepare(props);

  // add required class
  properties.className.push("InfoIcon");

  // establish popover
  const popover = (
    <Popover>
      {properties.title ? (
        <Popover.Header as={properties.titleAs ?? "h3"}>
          {properties.title}
        </Popover.Header>
      ) : null}

      {children ? <Popover.Body>{children}</Popover.Body> : null}
    </Popover>
  );
  delete properties.title;
  delete properties.titleAs;

  // establish icon
  const icon = (
    <Icon
      name={properties.name ?? "fa-solid fa-circle-info"}
      alt={properties.alt}
      variant={properties.variant != null ? properties.variant : "info"}
      className={properties.iconClassName}
      style={properties.iconStyle}
    />
  );
  delete properties.name;
  delete properties.alt;
  delete properties.variant;
  delete properties.iconClassName;
  delete properties.iconStyle;

  // merge classes
  properties.className = combine(properties.className);

  // render component
  return (
    <OverlayTrigger trigger="click" overlay={popover} rootClose>
      <Button variant="link" {...properties}>
        {icon}
      </Button>
    </OverlayTrigger>
  );
};

export default InfoIcon;