如何实现Material UI Slider悬停刻度标签时显示Tooltip

可以实现，操作步骤如下：

1. 先统一封装数值和对应提示文本的映射逻辑，避免重复代码：

// 数值对应提示映射
const VALUE_TITLE_MAP = [
  { threshold: 0, text: "Strongly disagree" },
  { threshold: 1, text: "Disagree" },
  { threshold: 2, text: "Neutral" },
  { threshold: 3, text: "Agree" },
  { threshold: 4, text: "Strongly agree" },
]

// 根据数值获取对应提示文本的工具方法
const getTooltipText = (value) => {
  const matchedItem = VALUE_TITLE_MAP.find(item => value <= item.threshold)
  return matchedItem ? matchedItem.text : ""
}

2. 简化原有的thumb提示组件逻辑，保留原有悬停thumb显示提示的能力：

const ValueLabelComponent2 = (props) => {
  const { children, value } = props;
  return (
    <Tooltip placement="top" title={getTooltipText(value)}>
      {children}
    </Tooltip>
  );
};

3. 给滑块的每个刻度标签单独绑定Tooltip，实现悬停标签显示对应提示的效果，示例如下（如果你的滑块是基于Material UI实现，直接自定义marks属性即可）：

// 自定义带Tooltip的刻度配置
const sliderMarks = [
  { value: 0, label: <Tooltip title={getTooltipText(0)} placement="top"><span>0</span></Tooltip> },
  { value: 1, label: <Tooltip title={getTooltipText(1)} placement="top"><span>1</span></Tooltip> },
  { value: 2, label: <Tooltip title={getTooltipText(2)} placement="top"><span>2</span></Tooltip> },
  { value: 3, label: <Tooltip title={getTooltipText(3)} placement="top"><span>3</span></Tooltip> },
  { value: 4, label: <Tooltip title={getTooltipText(4)} placement="top"><span>4</span></Tooltip> },
]

// 传入配置到滑块组件
<PrettoSlider1     
  ValueLabelComponent={ValueLabelComponent2}
  marks={sliderMarks}
  min={0}
  max={4}
/>

注意：刻度的label属性必须包裹在可接收鼠标事件的DOM节点（比如示例中的span）中，否则Tooltip无法正常触发。
修改完成后即可同时实现两种触发逻辑：悬停滑块thumb时显示当前数值对应的提示，悬停任意刻度标签时显示该刻度对应的提示。

内容的提问来源于stack exchange，提问作者Arun