组件 提示框 极简工具提示

极简工具提示

一个简单而极简的工具提示组件,支持黑暗主题和响应效果,使用Tailwind CSS构建。不使用JavaScript,仅使用HTML和CSS。

预览

HTML 代码

<div class="group relative inline-block">
  <button class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Hover over me</button>
  <div class="opacity-0 invisible group-hover:opacity-100 group-hover:visible absolute z-10 px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-700 dark:bg-gray-800 rounded-md shadow-sm">
    Tooltip text
    <svg class="absolute text-gray-700 dark:text-gray-800 h-2 w-full left-0 bottom-[-8px]" x="0px" y="0px" viewBox="0 0 25 25" xml:space="preserve"><polygon class="fill-current" points="0,0 12.5,25 25,0"/></svg>
  </div>
</div>

相关组件

工具提示组件

一个复杂、响应式、支持深色主题、拟态化充满活力的工具提示组件,适用于使用 Tailwind CSS 的仪表板。不需要 JavaScript,只需要带有 Tailwind 类的 HTML。对于深色模式,请使用 Tailwind 的 dark: 前缀进行样式设置。图片来自 picsum.photos 和 randomuser.me。

打开

拟物化仪表板 Tooltip

一个用于仪表板的复杂拟物化工具提示组件,具有三元配色方案和响应式设计,支持深色模式,使用 Tailwind CSS 构建,无需 JavaScript。

打开

拟物化工具提示组件

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

打开