BiteBalance/src/components/EducationalTooltip.jsx at f232d66d242f6becb0ce80a2e633d8dd202a4618 · RahilKothari9/BiteBalance · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import React from 'react';
import { Tooltip, IconButton, Typography, Box } from '@mui/material';
import { HelpOutline as HelpIcon } from '@mui/icons-material';

const EducationalTooltip = ({
  title,
  content,
  learnMore = null,
  icon = <HelpIcon />,
  placement = "top"
}) => {
  const tooltipContent = (
    <Box sx={{ maxWidth: 300 }}>
      <Typography variant="subtitle2" fontWeight="bold" gutterBottom>
        {title}
      </Typography>
      <Typography variant="body2" gutterBottom>
        {content}
      </Typography>
      {learnMore && (
        <Typography variant="caption" sx={{ fontStyle: 'italic', color: '#e3f2fd' }}>
          💡 {learnMore}
        </Typography>
      )}
    </Box>
  );

  return (
    <Tooltip
      title={tooltipContent}
      placement={placement}
      arrow
      sx={{
        '& .MuiTooltip-tooltip': {
          backgroundColor: '#1976d2',
          color: 'white',
          fontSize: '0.875rem',
          maxWidth: 320,
          padding: 2
        },
        '& .MuiTooltip-arrow': {
          color: '#1976d2'
        }
      }}
    >
      <IconButton size="small" sx={{ ml: 0.5, color: 'primary.main' }}>
        {icon}
      </IconButton>
    </Tooltip>
  );
};

export default EducationalTooltip;