CCHub Logo CCHub Tailwind Collection
コンポーネント ツールチップ ミニマリストツールチップ

ミニマリストツールチップ

ブログ/コンテンツ Web サイト用のミニマリストでフラットなデザイン ツールチップ コンポーネントで、単色の配色とシンプルなレイアウトを備えています。レスポンシブで、Tailwind CSSを使用したダークモードをサポートしています。

プレビュー

HTMLコード 

<div class="relative flex items-center group">
  <button class="text-gray-600 dark:text-gray-300 px-4 py-2 rounded-md border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500">Hover Me</button>
  <div class="absolute bottom-full mb-2 hidden group-hover:block w-48 p-2 text-sm text-white bg-gray-800 dark:bg-gray-200 rounded-md shadow-lg">
    <span class="text-gray-200 dark:text-gray-800">This is a minimalist tooltip.</span>
    <svg class="absolute top-full left-1/2 transform -translate-x-1/2 w-3 h-3 text-gray-800 dark:text-gray-200 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255 255"><polygon points="0,0 127.5,127.5 255,0"/></svg>
  </div>
</div>

関連コンポーネント

ミニマリストツールチップ

ダーク テーマのサポートとレスポンシブ エフェクトを備えたシンプルでミニマリストのツールチップ コンポーネントで、Tailwind CSS を使用して構築されています。JavaScriptは使用せず、HTMLとCSSのみを使用しています。

開ける

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

鮮やかな色、マイクロインタラクション、ダークモードのサポートを備えたレスポンシブツールチップコンポーネントで、産業用および製造用アプリケーションに適しています。ホバー/フォーカスに関する情報を表示します。

開ける

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

Tailwind CSS を使用したダッシュボード用の、複雑でレスポンシブなダークテーマ対応の Skeuomorphic-Vibrant Tooltip コンポーネント。JavaScript は必要なく、Tailwind クラスを含む HTML のみが必要です。ダークモードの場合は、スタイル設定にTailwindのdark:プレフィックスを使用します。画像はpicsum.photosと randomuser.me からのものです。

開ける