Минималистичная подсказка
Простой и минималистичный компонент всплывающих подсказок с поддержкой темной темы и адаптивными эффектами, созданный с использованием Tailwind CSS. Не используется JavaScript, только HTML и CSS.
HTML-код
<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>Связанные компоненты
Компонент всплывающей подсказки для микровзаимодействий
Простой, но привлекательный компонент всплывающих подсказок с тонкой анимацией микровзаимодействия, адаптивным дизайном и поддержкой темных тем, созданный с помощью Tailwind CSS. JavaScript не требуется.
Компонент всплывающей подсказки - Оттенки серого в стиле ар-деко
Сложный компонент всплывающих подсказок в стиле ар-деко для документации и вики-сайтов с цветовой схемой в оттенках серого, геометрическими узорами и богатым контентом. Полностью адаптивный с поддержкой темного режима.
Компонент «Нейроморфная подсказка»
Сложный компонент всплывающей подсказки в стиле Neumorphism, подходящий для бизнес-сайтов, использующий яркие цвета и предназначенный для поддержки темного режима.