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

Posted 2023-03-07

【中文标题】在反应中使用顺风 css 为范围滑块添加自定义工具提示

【英文标题】：Add custom tooltip for range slider using tailwind css in react

【发布时间】：2021-10-08 21:40:03

【问题描述】：

enter image description here

如何使用tailwaind css在图像中实现一些类似

【参考方案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>

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

【讨论】：

你好 @PCPbiscuite codesandbox.io/s/flamboyant-sammet-je7c1?file=/src/… 你能告诉我如何让这个滑块在所有屏幕上都响应我的意思是图像应该跟随滑块拇指

@SaiCharan 摆脱 useEffect 并在你的气泡中做这样的事情 $value%> pikpng.com/pngl/m/153-1534932_thumbs-up-png-green-clipart.png " style= height: "30px", width: "30px" /> value 另外，我建议你在这里使用 transform 属性，它有助于定位位

@SaiCharan 你不应该使用 querySelector 和直接的 DOM 操作，它在 React 中被认为是一种反模式

非常感谢@PCPbiscuit 我会在我的项目中尝试