CCHub Logo CCHub Tailwind Collection
组件 提示框 提示工具组件

提示工具组件

一个拟态风格的工具提示组件，用于作品集展示，支持暗模式，响应式设计，并使用Tailwind CSS。

预览

HTML 代码 

<div class="relative group">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-lg dark:shadow-none">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg dark:shadow-none p-4">
            <h2 class="text-gray-800 dark:text-gray-200 font-semibold">Project Title</h2>
            <p class="text-gray-600 dark:text-gray-400">This is a brief description of the project or product showcased in the portfolio.</p>
        </div>
    </div>
    <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block">
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-3 text-center transition-all duration-300">
            <p class="text-sm text-gray-800 dark:text-gray-200">More details about the project.</p>
            <img src="https://picsum.photos/200/100" alt="Project Image" class="mt-2 rounded-lg shadow-md dark:shadow-none">
        </div>
        <div class="w-3 h-3 bg-white dark:bg-gray-800 absolute left-1/2 transform -translate-x-1/2 -bottom-1 rotate-45"></div>
    </div>
</div>

相关组件

Material Design 工具提示组件 - 预订/预订

一个复杂的响应式 Material Design 工具提示组件，适用于预订/预订系统，具有柔和/不饱和的颜色、深度效果和深色模式支持。它在悬停/聚焦时提供详细信息。

打开

极简主义粉彩 Tooltip

一个最小而扁平的工具提示组件，专为商业和企业网站设计，具有柔和的色彩、响应式设计和使用 Tailwind CSS 的深色模式支持。

打开

工具提示组件

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

打开