Rechercher des composants

Catégories

Composants Infobulle

Infobulle

Informations supplémentaires affichées au survol

Infobulle du Glassmorphism

Un composant d’info-bulle conçu avec le style glassmorphism, prenant en charge le thème sombre et le design réactif, adapté aux interfaces de médias sociaux.

Ouvrir Aperçu

                <div class="relative group inline-block">
    <img src="https://picsum.photos/50/50" alt="Avatar" class="w-12 h-12 rounded-full" />
    <span class="absolute bottom-12 left-1/2 transform -translate-x-1/2 bg-white bg-opacity-30 backdrop-blur-sm border border-gray-200 p-2 rounded-md shadow-lg text-gray-900 text-sm transition-opacity duration-300 ease-in-out opacity-0 group-hover:opacity-100 dark:bg-gray-800 dark:bg-opacity-50 dark:border-gray-600 dark:text-white">
        <span class="font-bold">Your Tooltip Title</span>
        <p>This is a tooltip with glassmorphism design, making your social media interface more engaging!</p>
    </span>
</div>

Un composant d’info-bulle réactif conçu avec des micro-interactions, une palette de couleurs triadique et prend en charge le mode sombre pour les sites Web professionnels. Il comprend des animations attrayantes, une interface riche avec des éléments interactifs et utilise Tailwind CSS pour le style.

Ouvrir Aperçu

                <div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-blue-500 dark:focus:ring-blue-300" aria-expanded="true" aria-haspopup="true">
      Hover over me
    </button>
  </div>

  <div class="absolute z-10 hidden group-hover:block bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-lg transition-opacity duration-300 ease-in-out opacity-0 group-hover:opacity-100">
    <div class="p-3">
      <div class="flex items-center space-x-3">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full object-cover">
        <div>
          <p class="text-sm leading-5 font-medium text-gray-900 dark:text-gray-100">John Doe</p>
          <p class="text-sm leading-5 text-gray-500 dark:text-gray-400">Senior Developer</p>
        </div>
      </div>
      <div class="mt-2 text-gray-600 dark:text-gray-300">
        <p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum.</p>
      </div>
      <div class="mt-2 flex justify-end">
        <button class="px-3 py-1 bg-blue-500 dark:bg-blue-300 text-white dark:text-gray-800 rounded-md hover:bg-blue-600 dark:hover:bg-blue-400 transform transition-transform duration-300 hover:scale-105">Action</button>
      </div>
    </div>
  </div>
</div>

<style>
@media (prefers-reduced-motion: no-preference) {
  .transition-opacity {
    transition: opacity 0.5s ease-in-out;
  }
}
</style>

Infobulle

Composant d’info-bulle avec conception 3D, tons de terre, complexité simple et objectif du tableau de bord. Réactif avec prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="relative flex items-center group">
  <span clas="underline">Hover Over Me</span>
  <div class="absolute bottom-full mb-2 hidden group-hover:block px-3 py-2 text-sm font-medium text-white transition-all duration-500 ease-in-out transform bg-gray-800 rounded-md shadow-lg dark:bg-gray-700 -translate-x-1/2 left-1/2
   before:content-[''] before:absolute before:top-full before:left-1/2 before:-translate-x-1/2 before:border-8 before:border-x-transparent before:border-b-transparent before:border-t-gray-800 dark:before:border-t-gray-700">
    Tooltip content
  </div>
</div>

Composant d’info-bulle Micro-interactions

Un composant d’info-bulle simple mais attrayant avec des animations de micro-interaction subtiles, un design réactif et une prise en charge du thème sombre construit avec Tailwind CSS. Aucun JavaScript n’est requis.

Ouvrir Aperçu

                <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>

Infobulle minimaliste

Un composant d’info-bulle simple et minimaliste avec prise en charge du thème sombre et des effets réactifs, construit à l’aide de Tailwind CSS. Aucun JavaScript n’est utilisé, seulement HTML et CSS.

Ouvrir Aperçu

                <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>

Composant d’info-bulle

Un composant d’info-bulle réactif avec des micro-interactions pour l’engagement de l’utilisateur, avec un thème sombre et des animations attrayantes.

Ouvrir Aperçu

                <div class="relative group">
    <button class="bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-300">
        Hover me
    </button>
    <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-48 opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100">
        <div class="bg-gray-800 text-white p-2 rounded shadow-lg border border-gray-700">
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
                <span class="font-semibold">John Doe</span>
            </div>
            <div>
                <p class="mt-1 text-sm">This is a tooltip message that provides additional information.</p>
            </div>
            <img src="https://picsum.photos/200/100" alt="Placeholder" class="mt-2 rounded" />
        </div>
    </div>
</div>
<!-- Dark mode support -->
<style>
    @media (prefers-color-scheme: dark) {
        .bg-gray-800 {
            background-color: #1f2937;
        }
        .border-gray-700 {
            border-color: #374151;
        }
    }
</style>

Composant d’infobulle rétro

Un composant d’infobulle à thème rétro/vintage avec des effets réactifs et la prise en charge du mode sombre.

Ouvrir Aperçu

                <style>
  @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

  .tooltip-retro {
    font-family: 'Press Start 2P', cursive;
    position: relative;
    display: inline-block;
    cursor: pointer;
  }

  .tooltip-retro .tooltip-content {
    visibility: hidden;
    width: 120px;
    background-color: #33 некоторого number; /* Retro dark background */
    color: #0f0; /* Neon green text */
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
    border: 2px solid #0f0; /* Neon green border */
    box-shadow: 0 0 10px #0f0; /* Neon green glow */
  }

  .tooltip-retro .tooltip-content::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #0f0 transparent transparent transparent; /* Neon green triangle */
  }

  .tooltip-retro:hover .tooltip-content {
    visibility: visible;
    opacity: 1;
  }

  /* Dark Mode */
  @media (prefers-color-scheme: dark) {
    .tooltip-retro .tooltip-content {
      background-color: #0f0; /* Neon green background in dark mode */
      color: #333; /* Dark text in dark mode */
      border-color: #333; /* Dark border in dark mode */
      box-shadow: 0 0 10px #333; /* Dark glow in dark mode */
    }

    .tooltip-retro .tooltip-content::after {
      border-color: #333 transparent transparent transparent; /* Dark triangle in dark mode */
    }
  }

  /* Responsive effects */
  @media (max-width: 600px) {
    .tooltip-retro .tooltip-content {
      width: 80px;
      margin-left: -40px;
    }
  }
</style>

<div class="tooltip-retro">
  Hover over me
  <span class="tooltip-content">Retro Tooltip!</span>
</div>