CCHub Logo CCHub Tailwind Collection
コンポーネント ツールチップ ツールチップコンポーネント

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

ツールチップ Skeuomorphism スタイル、補色スキーム、シンプルな複雑さ、E コマース向けのコンポーネント。

プレビュー

HTMLコード 

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

関連コンポーネント

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

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

開ける

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

スキューモーフィック スタイルとアース トーンで設計された複雑なツールチップ コンポーネントで、ダーク モードをサポートする e コマース アプリケーションに適しています。

開ける

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

応答性の高いダークをテーマにしたツールチップコンポーネントで、Triadic カラースキームの一部で、ポートフォリオに適しています。Tailwind CSSで構築され、シンプルでミニマルな美学を実現しています。

開ける