在反应中使用 tailwind css 为范围滑块添加自定义工具提示

Question

enter image description here

如何使用 tailwind 实现图像中的点赞 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>

在这种情况下，“组件”是您的滑块按钮

在反应中使用 tailwind css 为范围滑块添加自定义工具提示

Add custom tooltip for range slider using tailwind css in react

html

css

tailwind-css

react-hooks