DataScope26/WEB

1import React, { useState } from 'react';2import { Info } from "lucide-react";3import './InfoIcon.css';4 5export default function InfoIcon({ description, title }) {6    const [isVisible, setIsVisible] = useState(false);7 8    return (9        <div className="info-icon-container">10            <div11                className="info-icon"12                onMouseEnter={() => setIsVisible(true)}13                onMouseLeave={() => setIsVisible(false)}14            >15                <Info></Info>16            </div>17            {isVisible && (description || title) && (18                <div className="info-tooltip">19                    {title && <h4 className="tooltip-title">{title}</h4>}20                    {description && <p className="tooltip-description">{description}</p>}21                </div>22            )}23        </div>24    );25}