向 MUI 徽章内容添加工具提示？

Question

我想向我的 MUI Badge 组件添加工具提示。

我尝试用 MUI 中的 ToolTip 组件包装徽章，但工具提示文本也会在子项悬停时显示，我希望它仅在 Badge 本身悬停时显示。

我也试过在徽章组件上使用原始 title 属性，但这有同样的问题。

有人知道向 Badge 组件添加工具提示的更好方法吗？

我的用法：

<Badge
      title={'Click to view more info'} // not ideal as the tooltip shows when the children are hovered too
      badgeContent={getTotalVulnerabilitiesCount()}
      showZero={false}
    >
        {children}
</Badge>

Answer 1

我最终构建了自己的徽章组件，它不会太长，也不是很好的解决方案 imo。如果有人对代码有反馈，请告诉我:)

import React from 'react';
import { makeStyles, Tooltip } from '@material-ui/core';

const useStyles = makeStyles({
  badgeStyles: {
    minHeight: '24px',
    minWidth: '24px',
    position: 'absolute',
    top: '-12px',
    left: 'calc(100% - 12px)',
    color: 'white',
    borderRadius: '50%',
    backgroundColor: 'tomato',
    padding: '3px',
    fontSize: '.75rem'
  }
});

const Badge = props => {
  const {
    children,
    showZero,
    ...badgeContentProps
  } = props;

  return (
    <span>
      {children}
      {
        (showZero || props.badgeContent !== 0) && (
          <BadgeComponent {...badgeContentProps}/>
        )
      }
    </span>
  );
};

const BadgeComponent = props => {
  const classes = useStyles();

  const {
    badgeContent,
    badgeClasses,
    onClick,
    tooltipText,
    tooltipPlacement
  } = props;

  // If no tooltiptext provided render without Tooltip
  if(tooltipText == null) return (
    <span
      className = {`${badgeClasses ?? ''} ${classes.badgeStyles}`}
      onClick={onClick ? onClick : undefined}
    >
      {badgeContent}
    </span>
  );

  // Render with Tooltip
  return (
    <Tooltip title={tooltipText} placement={tooltipPlacement}>
      <span
        className = {`${badgeClasses} ${classes.notifyCount}`}
        onClick={onClick ? onClick : undefined}
      >
        {badgeContent}
      </span>
    </Tooltip>
  );
};

export default Badge;

Answer 2

你非常接近，badgeContent prop 也接受 ReactNode 所以你可以把 Badge 内容放在 Tooltip 里面而不影响其他组件：

<Badge
  color="primary"
  badgeContent={
    <Tooltip title="Delete">
      <span>1</span>
    </Tooltip>
  }
>
  <MailIcon color="action" />
</Badge>

向 MUI 徽章内容添加工具提示？

Add a tooltip to MUI Badge content?

reactjs

material-ui

tooltip