如何在材质 ui 滑块中的标签悬停时获取工具提示

编程问答 2022-05-02

问题描述

我正在尝试创建一个滑块测验，我想要的是将工具提示悬停在滑块上的标签上

现在，当我将鼠标悬停在拇指上并将其悬停在鼠标位置时，我可以看到工具提示 这是图片

鼠标表示我的红色M

enter image description here

我想在鼠标位于其他值时显示工具提示

enter image description here

当拇指和鼠标在同一点上时，工具点可见

enter image description here

这是我如何使用它的代码

<PrettoSlider1     
      ValueLabelComponent={ValueLabelComponent2}
/>

 const ValueLabelComponent2 = (props) => {
    const { children,value } = props;
    if (value === 0) {
      return (
        <Tooltip placement="top" title={"Strongly disagree"}>
          {children}
        </Tooltip>
      );
    } else if (value <= 1) {
      return (
        <Tooltip placement="top" title={"disagree"}>
          {children}
        </Tooltip>
      );
    } else if (value <= 2) {
      return (
        <Tooltip placement="top" title={"Neutral"}>
          {children}
        </Tooltip>
      );
    } else if (value <= 3) {
      return (
        <Tooltip placement="top" title={"Agree"}>
          {children}
        </Tooltip>
      );
    } else if (value <= 4) {
      return (
        <Tooltip placement="top" title={"Strongly agree"}>
          {children}
        </Tooltip>
      );
    } else {
      return (
        <Tooltip placement="top" title={""}>
          {children}
        </Tooltip>
      );
    }
  };

是否有可能如果我像第二张图片那样悬停，我可以在没有拇指的情况下获得工具提示

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptmaterial-uireactjsreactjsreactjsreactjssliderslider