Untitled

import React, { useState } from 'react';
import { Badge, Typography, Box } from '@mui/material';

function HoverBadge() {
  // State to manage hover
  const [isHovered, setIsHovered] = useState(false);

  return (
    <Box
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      sx={{ display: 'inline-block' }} // Ensure the Box behaves like an inline element
    >
      {isHovered ? (
        <Badge badgeContent="!" color="secondary">
          <Typography variant="body1">Hover over me</Typography>
        </Badge>
      ) : (
        <Typography variant="body1">Hover over me</Typography>
      )}
    </Box>
  );
}

export default HoverBadge;