How to get tooltip on the hover of the label in material ui slider

Viewed 604

I am trying to create a slider quiz and what i want is on the hover of the label on the slider the tooltip appears

Right now when i hover on the thumb and its on the location of my mouse i can see the tooltip Here is the image

The mouse is denoted my red M enter image description here

I want to show the tooltip when the mouse is on other value enter image description here

And when the thumb and mouse is on the same point the toolpoint is visible enter image description here

Here is the code on how I am using this

<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>
      );
    }
  };

Is it possible that if i hover like in 2nd image I can get the tooltip without the presence of thumb

0 Answers
Related