How to add custom text to slider tooltip?

MozaicMozaic AmsterdamCommunity Member Qubie ✭
edited May 7 in Custom Code

How to add custom text to slider tooltip?

Hello Everyone,

I am trying to create a survey where respondents use a slider to provide their choice.

As one moves the handle along the slider the choices are (1,2,3,4,5) are shown respectively on the tooltip.

How can I show custom text in the toolTipBox instead of the choice selected. With respect to the above image, how can I show "customized text" in the box instead of one?

Best Answer

  • TomGTomG Raleigh, NC Wizard ✭✭✭✭✭
    Accepted Answer

    Use a MutationObserver.


  • MozaicMozaic AmsterdamCommunity Member Qubie ✭

    @TomG Thanks for the solution it worked great except for some edge cases.

    When the slider handle is at the start till the near end it shows the full text as shown in the below photo.

    However, as it reaches the end of the slider the text is cut short by the question container. It would be great if you can give some insight about how can I make the full text appear? I would not mind even if the text flows out of the question container.

  • TomGTomG Raleigh, NCCommunity Member Wizard ✭✭✭✭✭

    I think you will need to dynamically style the slider tool tip box based on it's position.

  • MozaicMozaic AmsterdamCommunity Member Qubie ✭

    @TomG I can understand what you are suggesting, however, is there a way the toolTipBox can flow out of the white boundary in the picture?

  • TomGTomG Raleigh, NCCommunity Member Wizard ✭✭✭✭✭

    @Mozaic, I was thinking you would right align when it approach the right side and left align when it approached the left.

Sign In to Comment