Slider tooltip in modal scrolling with page

[8shaks]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.11.0

Environment

Windows 10

Reproduction link

Steps to reproduce

Create a modal, make height larger then screen size so you are able to scroll,
create a slider with the tool tip always visible,
scroll

What is expected?

The slider tooltip should stay above the slider handle when you scroll

What is actually happening?

The tooltip is moving down the page as well when you scroll.

[orzyyyy]

This may help you.

[8shaks]

Where would i add this piece of code so that it makes these changes to the slider tooltip?

[orzyyyy]

My fault, I confusion between Slider and Select, ignore this...

[orzyyyy]

getPopupContainer is used in Tooltip, but Slider didn't pass rest attributes of props, maybe add them there?

[8shaks]

So how would I add this ability to the tooltip code?

…

On Mon, Dec 3, 2018, 10:08 PM orzorzorzorz ***@***.*** wrote: getPopupContainer is used in Tooltip, but Slider didn't pass rest attributes of props, maybe add them there <https://github.com/ant-design/ant-design/blob/master/components/slider/index.tsx#L93> ? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#13418 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AmxQD6T_5Eg3wi-TyNEku8a9KvPut-hlks5u1ecqgaJpZM4Y_puL> .

[spideeee]

Since the Tooltip is wrapped inside the slider and you cannot pass the getPopupContainer to it, so to fix your issue for now, you can listen to onScroll and re-render your component to update it.

<div className="App" onScroll={e => {this.setState({visible:this.state.visible})}}>
...
</div>

This will fix your issue with the current version, BTW we should add another prop to Slider named tooltipProps, so user can pass the props to Tooltip or specifically the getPopupContainer as getTooltipPopupContainer if needed.

[afc163]

react-component/slider#374

[spideeee]

@afc163 , I think the prop should be added as optional prop, to avoid such issues. If yes, I can raise a PR.

[8shaks]

Thanks, I was playing around with the temporary solution. It works great for desktop screens, but I noticed for mobile screens the Tooltip lags behind, and it takes a second or two for it to return to it's expected position above the Slider Handle when the user scrolls. Is there any work around to fix this?

[IssueHuntBot]

@issuehuntfest has funded $20.00 to this issue. See it on IssueHunt

[dooleyb1]

This is still occurring for me

[yoyo837]

@dooleyb1 Please feel free to open a new issue.

[8shaks]

Hey, my fix to the solution was to add this prop to the Slider

getTooltipPopupContainer={() => document.querySelector(".ant-slider-step")}

Should work correctly with that.

[dooleyb1]

Hey, my fix to the solution was to add this prop to the Slider

getTooltipPopupContainer={() => document.querySelector(".ant-slider-step")}

Should work correctly with that.

That worked perfectly, thank you!