在react中使用顺风css为范围滑块添加自定义工具提示

Question

输入图片描述

如何实现一些像在图像与尾部css

Answer 1

<div className="relative group">
<Component />
{text && (
<div
className='absolute left-1/2 transform -translate-x-1/2 border mt-2 transition-all ease-in-out duration-200 border-blue-gray w-125 text-center rounded-tiny p-2 text-2xs z-50 bg-white opacity-0 scale-y-0 group-hover:opacity-100 group-hover:scale-y-100'
>
<span>{text}</span>
<div
className='absolute w-2.5 h-2.5 border-blue-gray border-t border-r transform left-1/2 -translate-1/2 bg-white'
/>
</div>
)}
</div>

"Component"这里是sliders按钮