组件 提示框 微交互工具提示组件

微交互工具提示组件

一个简单而引人入胜的提示工具组件,具有微交互动画、响应式设计和暗黑主题支持,采用Tailwind CSS构建。无需JavaScript。

预览

HTML 代码

<div class="flex justify-center items-center h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative group">
    <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors duration-200">Hover Me</button>
    <div class="absolute bottom-full mb-2 left-1/2 transform -translate-x-1/2 px-3 py-2 bg-gray-800 text-white text-sm rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
      Hello! I'm a Tooltip
    </div>
  </div>
</div>

相关组件

工具提示组件

一个响应式 Material Design 工具提示框组件,具有用于电子商务的单色配色方案,具有深色模式支持。没有 JavaScript、HTML 和 Tailwind CSS。

打开

拟物化提示组件

一个响应式工具提示组件,采用拟物化和鲜艳的色彩设计,适用于博客和内容消费。它包括使用 Tailwind CSS 的深色主题支持。

打开

提示组件

一个响应式工具提示组件,设计有微交互、三元色彩方案,并支持专业企业网站的深色模式。它包括引人入胜的动画、一个丰富的界面,具有交互元素,并使用Tailwind CSS进行样式设计。

打开