Styled Tooltip - Copy this React, Mui Component to your project

<Alert severity="warning" variant="filled" sx={{ p: 0, overflow: 'hidden' }}> <AlertTitle> <Typography variant="h6" sx={{ fontWeight: 600, mb: 1 }}> {t('swapSim.warning.title')} </Typography> </AlertTitle> {/* Content block with white background and rounded corners */} <Box sx={{ bgcolor: 'white', borderRadius: '16px', p: { xs: 2, sm: 3 }, mt: 1, }} className="space-y-4" > <Stack spacing={2}> {/* Description */} <Typography variant="body1">{t('swapSim.warning.description')}</Typography> {/* Contact card */} <CardRadiusSmall className="!bg-white space-y-3 p-4 border border-gray-200 shadow-sm"> <Typography variant="body1"> 📞 {t('swapSim.warning.call')}: <b>{process.env.PHONE_2}</b> {t('swapSim.warning.or')} <b>{process.env.PHONE}</b> </Typography> <Typography variant="body1"> 💬 {t('swapSim.warning.chat')}:{' '} <Link href="https://airvoicewireless.com/livechat" target="_blank" rel="noopener" color="primary"> {t('swapSim.warning.chatLink')} </Link> </Typography> <Typography variant="body1"> 📧 {t('swapSim.warning.email')}: <Link href={`mailto:${process.env.SUPPORT}`} color="primary">{process.env.SUPPORT}</Link> </Typography> </CardRadiusSmall> {/* Note block with icon */} <Box> <Typography variant="body1" sx={{ fontWeight: 500 }}> {t('swapSim.warning.note')} </Typography> <Box className="flex flex-wrap items-start mt-2 space-x-2"> <AccountWarringBlue /> <Typography variant="body1" dangerouslySetInnerHTML={{ __html: t('swapSim.warning.note_2') }} sx={{ mt: { xs: 0.5, sm: 0 } }} /> </Box> </Box> </Stack> </Box> </Alert> bui this beautifull