Always-visible tooltip positioned incorrectly until I click handle

[brandondurham]

I have my tooltip set to show at all times. When my component first renders, the tooltip sits right on top of the handle. When you click the handle it jumps up to its correct position.

My related code:

import Slider from 'rc-slider'
import Tooltip from 'rc-tooltip'

Custom handle:

const handle = props => {
	const {
		value,
		dragging,
		index,
		...restProps
	} = props

	const overlay = severityLevels[Object.keys(severityLevels)[value - 1]].label

	return (
		<Tooltip
			visible
			key={ index }
			overlay={ overlay }
			placement="top"
			prefixCls="rc-slider-tooltip"
		>
			<>
				<Handle value={ value } { ...restProps } />
			</>
		</Tooltip>
	)
}

The component:

export function ThreatLevel({
	className,
	value,
	max,
	min,
	onUpdate,
	step,
	...props
}) {
	const [color, setColor] = useState(getColor(value))

	const onChange = val => {
		const idToLevel = findKey(severityLevels, level => level.id === val)
		setColor(getColor(idToLevel))
		onUpdate(val)
	}

	const severityID = severityLevels[value].id

	return (
		<Slider
			{ ...props }
			defaultVisible
			visible
			className={ className }
			defaultValue={ severityID }
			handle={ handle }
			handleStyle={ [
				{ backgroundColor: color },
			] }
			max={ max }
			min={ min }
			onChange={ onChange }
			step={ step }
		/>
	)
}

And lastly, the CSS:

.rc-slider {
	border-radius: 8px;
	box-sizing: border-box;
	display: flex;
	height: 14px;
	margin: 0 8%;
	position: relative;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-ms-touch-action: none;
	touch-action: none;
	z-index: 2000;
}

.rc-slider * {
	box-sizing: border-box;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.rc-slider-rail {
	background-color: rgb(240, 242, 242);
	flex: 1;
	height: 7px;
}

.rc-slider-rail::before,
.rc-slider-rail::after {
	background-color: rgb(240, 242, 242);
	bottom: 0;
	content: "";
	height: 7px;
	position: absolute;
	top: 0;
	width: 10%;
}

.rc-slider-rail::before {
	border-bottom-left-radius: 8px;
	border-top-left-radius: 8px;
	right: 100%;
}

.rc-slider-rail::after {
	border-bottom-right-radius: 8px;
	border-top-right-radius: 8px;
	left: 100%;
}

.rc-slider-track {
	position: absolute;
	left: 0;
	height: 0;
}

.rc-slider-handle {
	background-color: rgb(255, 137, 73);
	position: absolute;
	width: 20%;
	height: 7px;
	cursor: grab;
	cursor: -webkit-grab;
	border-radius: 7px;
	-ms-touch-action: pan-x;
	touch-action: pan-x;
}

.rc-slider-handle:focus {
	border-color: #57c5f7;
	outline: none;
}

.rc-slider-handle-click-focused:focus {
	border-color: #96dbfa;
	box-shadow: unset;
}

.rc-slider-handle:hover {
	border-color: #57c5f7;
}

.rc-slider-handle:active {
	border-color: #57c5f7;
	cursor: -webkit-grabbing;
	cursor: grabbing;
}

.rc-slider-mark {
	position: absolute;
	top: 18px;
	left: 0;
	width: 100%;
	font-size: 12px;
}

.rc-slider-mark-text {
	position: absolute;
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	cursor: pointer;
	color: #999;
}

.rc-slider-mark-text-active {
	color: #666;
}

.rc-slider-step {
	position: absolute;
	width: 100%;
	height: 4px;
	background: transparent;
}

.rc-slider-dot {
	position: absolute;
	bottom: -2px;
	margin-left: -4px;
	width: 8px;
	height: 8px;
	border: 2px solid #e9e9e9;
	background-color: #fff;
	cursor: pointer;
	border-radius: 50%;
	vertical-align: middle;
}

.rc-slider-dot-active {
	border-color: #96dbfa;
}

.rc-slider-dot-reverse {
	margin-left: 0;
	margin-right: -4px;
}

.rc-slider-disabled {
	background-color: #e9e9e9;
}

.rc-slider-disabled .rc-slider-track {
	background-color: #ccc;
}

.rc-slider-disabled .rc-slider-handle,
.rc-slider-disabled .rc-slider-dot {
	border-color: #ccc;
	box-shadow: none;
	background-color: #fff;
	cursor: not-allowed;
}

.rc-slider-disabled .rc-slider-mark-text,
.rc-slider-disabled .rc-slider-dot {
	cursor: not-allowed !important;
}

.rc-slider-vertical {
	width: 14px;
	height: 100%;
	padding: 0 5px;
}

.rc-slider-vertical .rc-slider-rail {
	height: 100%;
	width: 4px;
}

.rc-slider-vertical .rc-slider-track {
	left: 5px;
	bottom: 0;
	width: 4px;
}

.rc-slider-vertical .rc-slider-handle {
	margin-left: -5px;
	-ms-touch-action: pan-y;
	touch-action: pan-y;
}

.rc-slider-vertical .rc-slider-mark {
	top: 0;
	left: 18px;
	height: 100%;
}

.rc-slider-vertical .rc-slider-step {
	height: 100%;
	width: 4px;
}

.rc-slider-vertical .rc-slider-dot {
	left: 2px;
	margin-bottom: -4px;
}

.rc-slider-vertical .rc-slider-dot:first-child {
	margin-bottom: -4px;
}

.rc-slider-vertical .rc-slider-dot:last-child {
	margin-bottom: -4px;
}

.rc-slider-tooltip {
	position: absolute;
	left: 0;
	top: 0;
	visibility: visible;
	box-sizing: border-box;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	z-index: 2000;
}

.rc-slider-tooltip-inner {
	color: rgb(136, 134, 134);
	font-family: 'Proxima Nova Bold';
	font-size: 14px;
	height: 24px;
	line-height: 1;
	min-width: 24px;
	padding: 0;
	pointer-events: none;
	text-align: center;
	text-decoration: none;
}

Any ideas what might be going on?

[musangowope]

Im experiencing the same problem. Some help would be great

[cbourlon]

Same problem here :) Did you find a solution?