如何在 React MUI Tooltip 中添加多個文本作為 label 和子標簽

Question

我正在向我的 React 應用程序添加一個 MaterialUI 工具提示，我需要有兩個文本行。 一個將被視為標題主文本，另一個將被視為子標簽。

在屏幕截圖中，您可以看到我卡在哪里

我們的目標是把所有東西都放在一張卡片上

The label should read: Self-assessment opened: [n]

Sub-label: Click to drill down

我擁有的 Figma 示例顯示了卡片的外觀

我是 MUI 的新手，不知道該怎么做，這是我到目前為止的代碼

import { Box, Popper, Tooltip } from '@mui/material';
import { styled } from '@mui/material/styles';
import { useTheme } from '@mui/styles';
import { useIntl } from 'react-intl';

// Use styles from src/analytics/components/TooltipCard/TooltipCard.js to make it look the same
const TooltipCardPopper = styled(Popper)(({ theme }) => ({
  '& > div': {
    ...theme.typography.caption,
    backgroundColor: 'white',
    boxShadow: theme.shadows[7],
    borderRadius: '5px',
    paddingLeft: theme.spacing(1.2),
    paddingRight: theme.spacing(1.2),
    paddingTop: theme.spacing(0.5),
    paddingBottom: theme.spacing(0.5),
    borderWidth: 1,
    borderStyle: 'solid',
    borderColor: theme.palette.grey[300],
  },
}));

const calculateTotals = ({ data }) =>
  data?.reduce(function (accumulator, item) {
    return accumulator + item.total;
  }, 0);

const CenteredMetricToolTip = ({ position, data }) => {
  const theme = useTheme();
  const intl = useIntl();
  const show = !!position;

  const total = calculateTotals({ data });

  return (
    <Tooltip
      open={show}
      disableFocusListener
      disableHoverListener
      disableTouchListener
      disableInteractive
      title={intl.formatMessage({ defaultMessage: 'Click to drill down' })}
      PopperComponent={TooltipCardPopper}
      TransitionProps={{ timeout: 0 }} // timeout more than 0 => transition => causes re-positioning and blinking
    >
      <Box
        sx={{
          position: 'absolute',
          display: show ? 'block' : 'hide',
          left: `${position?.x ?? 0}px`,
          top: `${position?.y ?? 0}px`,
        }}
      >
        {intl.formatMessage(
          { defaultMessage: ' Self-assessment opened: {total}' },
          { total },
        )}
      </Box>
    </Tooltip>
  );
};

export default CenteredMetricToolTip;

Answer 1

嘗試將title屬性值從title={intl.formatMessage({ defaultMessage: 'Click to drill down' })}更改為

 title={
       <div>
         <div>{intl.formatMessage({ defaultMessage:"Self-assessment opened: [n]" })}<div>
         <div>{intl.formatMessage({ defaultMessage:"Click to drill down"})}</div>
       <div> 
 }

在Tooltip組件上