glide-design-system/src/lib/components/tooltip/Tooltip.js

Glide design system is an open-source React component library. It offers numerous benefits that make them essential tools for design and development teams.

import React, { useState } from "react";
import styles from "./Tooltip.module.css";

function Tooltip({ children, style, title, className }) {
  const [isHovered, setIsHovered] = useState(false);

  const combinedStyle = {
    ...style,
  };

  return (
    <div
      style={{ combinedStyle }}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}>
      {title}
      <div className={styles.tooltip}>
        <div></div>
        {isHovered && (
          <div
            className={`${styles.tooltiptext} ${className ? className : ""} `}>
            {children ? children : ""}
          </div>
        )}
      </div>
    </div>
  );
}

export default Tooltip;