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.

Aperçu

HTML Code

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

Composants associés

3D_Real_Estate_Tooltip

Il s’agit d’un composant d’info-bulle modérément complexe et réactif avec des éléments de conception 3D et une palette de couleurs chaudes de coucher de soleil, adapté aux annonces immobilières. Inclut la prise en charge du mode sombre.

Ouvrir

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

Composant d’info-bulle

Un composant d’info-bulle neumorphe avec une palette de couleurs complémentaire, une complexité modérée et une conception réactive avec prise en charge du thème sombre, adapté à un blog ou à la consommation de contenu.

Ouvrir