如何在Material UI v4的Rating组件中为每个星级添加Tooltip（无需更换评分组件库）

当然可以实现！完全不需要依赖其他评分组件库，我们可以利用Material UI Rating组件的自定义图标属性，轻松给每个星级加上Tooltip。下面是具体的实现方法：

核心思路 #

Rating组件允许我们通过icon和emptyIcon属性自定义每个星级的渲染内容，我们只需要把每个星星图标包裹进Tooltip组件，再传递给这两个属性即可。

完整代码示例 #

import React, { useState } from 'react';
import Rating from '@material-ui/core/Rating';
import Tooltip from '@material-ui/core/Tooltip';
import StarIcon from '@material-ui/icons/Star';
import StarBorderIcon from '@material-ui/icons/StarBorder';

// 自定义带Tooltip的星级组件
const TooltipWrappedStar = ({ index, value, ...props }) => {
  // 自定义每个星级对应的提示文本，可根据需求修改
  const ratingLabels = ['不满意', '一般', '满意', '很满意', '非常满意'];
  // 判断当前星级是否被填充
  const isFilled = index < value;

  return (
    <Tooltip 
      title={ratingLabels[index]} 
      placement="top" 
      arrow // 可选：添加Tooltip箭头
    >
      {isFilled ? <StarIcon {...props} /> : <StarBorderIcon {...props} />}
    </Tooltip>
  );
};

const RatingWithTooltips = () => {
  const [ratingValue, setRatingValue] = useState(3);

  return (
    <Rating
      value={ratingValue}
      onChange={(e, newValue) => setRatingValue(newValue)}
      // 将自定义组件传入icon和emptyIcon
      icon={<TooltipWrappedStar />}
      emptyIcon={<TooltipWrappedStar />}
      precision={1} // 可选：设置精度，比如支持半星的话可以设为0.5
    />
  );
};

export default RatingWithTooltips;

关键细节说明 #

• 自定义Tooltip内容：你可以修改ratingLabels数组，替换成符合你业务场景的提示文本，比如“1星：不推荐”、“5星：强烈推荐”等。
• 样式与交互调整：Tooltip的placement属性可以调整提示框的位置（比如bottom、left），添加arrow属性可以显示箭头指向星级；如果需要自定义星星的样式，可以给图标组件添加className或者直接通过style属性修改。
• 半星支持：如果需要支持半星评分，只需要把precision设为0.5，同时调整TooltipWrappedStar组件的逻辑来处理半星状态（比如判断index + 0.5 <= value来显示半星图标）。

这种方案完全基于Material UI v4的原生组件实现，不需要额外引入其他库，完美适配你的需求！

内容的提问来源于stack exchange，提问作者Federico De Marines