ツールチップ

3Dデザイン、アースカラー、シンプルな複雑さ、ダッシュボードの目的を備えたツールチップコンポーネント。ダークテーマのサポートによるレスポンシブ。

プレビュー

HTMLコード

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

関連コンポーネント

スキューモーフィックツールチップコンポーネント

スキューモーフィズムと鮮やかな色で設計された応答性の高いツールチップコンポーネントで、ブログやコンテンツの消費に適しています。これには、Tailwind CSSを使用したダークテーマのサポートが含まれています。

開ける

ツールチップコンポーネント

e コマース用の単色配色で、ダークモードをサポートするレスポンシブマテリアルデザインツールチップコンポーネントです。JavaScript、HTML、Tailwind CSSのみはありません。

開ける

ツールチップコンポーネント - アールデコ調グレースケール

アールデコ調にインスパイアされた複雑なドキュメントや Wiki サイト向けのツールチップコンポーネントで、グレースケールの配色、幾何学模様、豊富なコンテンツが特徴です。ダークモードのサポートにより、完全にレスポンシブです。

開ける