Composants Infobulle Composant d’info-bulle

Composant d’info-bulle

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

Aperçu

HTML Code

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

Composants associés

Infobulle de commerce électronique pastel minimaliste

Composant d’info-bulle pastel minimaliste pour le commerce électronique, avec un design réactif et une prise en charge du mode sombre.

Ouvrir

Minimalist_Tooltip

Composant d’info-bulle de conception minimaliste/plate pour le commerce électronique avec un design réactif et une prise en charge du thème sombre. Utilise une palette de couleurs complémentaire et a une complexité modérée.

Ouvrir

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