Infobulle

Composant d’info-bulle skeuomorphe

Un composant d’info-bulle complexe conçu avec un style skeuomorphe et des tons de terre, adapté aux applications de commerce électronique avec prise en charge du mode sombre.

Ouvrir l’aperçu

                <div class="relative group">
    <img src="https://picsum.photos/200/200?random=1" alt="Product Image" class="w-40 h-40 rounded-lg shadow-lg">
    <div class="absolute z-10 hidden group-hover:flex flex-col items-center p-4 bg-gray-800 bg-opacity-80 border border-gray-700 rounded-lg shadow-lg transition-all duration-300 ease-in-out dark:bg-gray-900 dark:border-gray-600">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white mb-2">
        <h3 class="text-lg text-earthgreen-200">Product Name</h3>
        <p class="text-sm text-earthbrown-200">Brief description of the product goes here. It mimics wood and soil textures for an earthy feel.</p>
        <div class="flex space-x-2 mt-2">
            <span class="px-3 py-1 text-xs text-white bg-earthbrown-300 rounded-full">Add to Cart</span>
            <span class="px-3 py-1 text-xs text-white bg-earthbrown-600 rounded-full">View More</span>
        </div>
    </div>
</div>

Composant d’info-bulle

Un composant d’info-bulle de style Neumorphism pour la présentation de portefeuilles avec la prise en charge du mode sombre, la conception réactive et l’utilisation de Tailwind CSS.

Ouvrir l’aperçu

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

Composant d’info-bulle

Composant d’infobulle avec style Skeuomorphism, Schéma de couleurs complémentaires, Complexité simple, pour le commerce électronique.

Ouvrir l’aperçu

                <div class="relative inline-block">
  <button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded shadow-md dark:bg-gray-700 dark:hover:bg-gray-600 dark:text-gray-200">Hover over me</button>
  <div class="hidden absolute z-10 px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-700 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-600">
    Tooltip content
    <div class="tooltip-arrow"></div>
  </div>
</div>

<style>
.tooltip:hover + div {
  display: block;
  opacity: 1;
}

.tooltip-arrow,
.tooltip-arrow:after {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.tooltip-arrow {
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-bottom-color: #4a5568;
}

.dark .tooltip-arrow {
  border-bottom-color: #4a5568;
}


.tooltip-arrow:after {
  bottom: 1px;
  margin-left: -5px;
  border-width: 5px;
  border-bottom-color: #4a5568;
}

.dark .tooltip-arrow:after {
  border-bottom-color: #4a5568;
}
</style>

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

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

Catégories

Infobulle