组件 提示框 极简工具提示框

极简工具提示框

用于博客/内容网站的极简扁平化设计工具提示框组件,具有单色配色方案和简单的布局。它是响应式的,并支持使用 Tailwind CSS 的深色模式。

预览

HTML 代码

<div class="relative flex items-center group">
  <button class="text-gray-600 dark:text-gray-300 px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500">Hover Me</button>
  <div class="absolute bottom-full mb-2 hidden group-hover:block w-48 p-2 text-sm text-white bg-gray-800 dark:bg-gray-200 rounded-md shadow-lg">
    <span class="text-gray-200 dark:text-gray-800">This is a minimalist tooltip.</span>
    <svg class="absolute top-full left-1/2 transform -translate-x-1/2 w-3 h-3 text-gray-800 dark:text-gray-200 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255 255"><polygon points="0,0 127.5,127.5 255,0"/></svg>
  </div>
</div>

相关组件

工具提示组件

一个简单的响应式工具提示组件,专为博客内容使用而设计,具有灰度配色方案的 3D 设计,并使用 Tailwind CSS 支持深色模式。

打开

拟物化工具提示组件

一个复杂的工具提示组件,采用拟物化样式和大地色调设计,适用于支持深色模式的电子商务应用程序。

打开

工具提示组件

响应式工具提示组件,具有鲜艳的色彩、微交互和深色模式支持,适用于工业和制造应用程序。显示有关悬停/聚焦的信息。

打开