组件 提示框 工具提示组件

工具提示组件

一个用于活动/会议网站的极简扁平设计工具提示组件,采用黑白配色方案和明亮的点缀。

预览

HTML 代码

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="relative group">
    <button class="px-6 py-3 bg-gray-800 text-white rounded-lg shadow-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:bg-gray-200 dark:text-gray-900 dark:hover:bg-gray-300 dark:focus:ring-purple-400 dark:focus:ring-offset-gray-900 transition-colors duration-200">
      Hover for Info
    </button>
    <div class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 w-48 p-3 bg-gray-900 text-white text-sm rounded-lg shadow-lg opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity duration-300 pointer-events-none group-hover:pointer-events-auto group-focus-within:pointer-events-auto z-10 dark:bg-gray-100 dark:text-gray-900 dark:border dark:border-gray-200
                before:content-[''] before:absolute before:top-full before:left-1/2 before:-translate-x-1/2 before:border-8 before:border-t-gray-900 before:border-x-transparent before:border-b-transparent dark:before:border-t-gray-100">
      <p class="font-semibold mb-1 text-purple-400 dark:text-purple-600">Event Details</p>
      <p>This is important information about the conference event.</p>
      <div class="absolute -bottom-1 left-1/2 -ml-2 w-4 h-4 bg-gray-900 dark:bg-gray-100 transform rotate-45 pointer-events-none origin-bottom-left"></div>
    </div>
  </div>
</div>

相关组件

3D_Real_Estate_Tooltip

一个中等复杂度的响应式工具提示组件,具有 3D 设计元素和温暖的日落配色方案,适用于房地产列表。包括深色模式支持。

打开

工具提示组件

用于游戏界面的极简、扁平设计的工具提示组件,具有黑色、白色和明亮的强调色,具有复杂的交互元素和完整的响应能力,包括深色模式支持。

打开

提示组件

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

打开