ツールチップ

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

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

                <div class="relative group">
    <img src="https://picsum.photos/200/200?random=1" alt="Product Image" class="w-40 h-40 rounded-lg shadow-lg">
    <div class="absolute z-10 hidden group-hover:flex flex-col items-center p-4 bg-gray-800 bg-opacity-80 border border-gray-700 rounded-lg shadow-lg transition-all duration-300 ease-in-out dark:bg-gray-900 dark:border-gray-600">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white mb-2">
        <h3 class="text-lg text-earthgreen-200">Product Name</h3>
        <p class="text-sm text-earthbrown-200">Brief description of the product goes here. It mimics wood and soil textures for an earthy feel.</p>
        <div class="flex space-x-2 mt-2">
            <span class="px-3 py-1 text-xs text-white bg-earthbrown-300 rounded-full">Add to Cart</span>
            <span class="px-3 py-1 text-xs text-white bg-earthbrown-600 rounded-full">View More</span>
        </div>
    </div>
</div>

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

ダークモードのサポート、レスポンシブデザイン、Tailwind CSSを使用したポートフォリオショーケース用のNeumorphismスタイルのツールチップコンポーネント。

プレビューを開く

                <div class="relative group">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="Avatar" class="w-10 h-10 rounded-full shadow-lg dark:shadow-none">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg dark:shadow-none p-4">
            <h2 class="text-gray-800 dark:text-gray-200 font-semibold">Project Title</h2>
            <p class="text-gray-600 dark:text-gray-400">This is a brief description of the project or product showcased in the portfolio.</p>
        </div>
    </div>
    <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block">
        <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-3 text-center transition-all duration-300">
            <p class="text-sm text-gray-800 dark:text-gray-200">More details about the project.</p>
            <img src="https://picsum.photos/200/100" alt="Project Image" class="mt-2 rounded-lg shadow-md dark:shadow-none">
        </div>
        <div class="w-3 h-3 bg-white dark:bg-gray-800 absolute left-1/2 transform -translate-x-1/2 -bottom-1 rotate-45"></div>
    </div>
</div>

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

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

プレビューを開く

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

Glassmorphismツールチップ

glassmorphismスタイルで設計されたツールチップコンポーネントで、ダークテーマとレスポンシブデザインをサポートし、ソーシャルメディアインターフェイスに適しています。

プレビューを開く

                <div class="relative group inline-block">
    <img src="https://picsum.photos/50/50" alt="Avatar" class="w-12 h-12 rounded-full" />
    <span class="absolute bottom-12 left-1/2 transform -translate-x-1/2 bg-white bg-opacity-30 backdrop-blur-sm border border-gray-200 p-2 rounded-md shadow-lg text-gray-900 text-sm transition-opacity duration-300 ease-in-out opacity-0 group-hover:opacity-100 dark:bg-gray-800 dark:bg-opacity-50 dark:border-gray-600 dark:text-white">
        <span class="font-bold">Your Tooltip Title</span>
        <p>This is a tooltip with glassmorphism design, making your social media interface more engaging!</p>
    </span>
</div>

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

マイクロインタラクション、トライアドカラースキームで設計されたレスポンシブツールチップコンポーネントで、プロフェッショナルなビジネス/企業Webサイトのダークモードをサポートします。これには、魅力的なアニメーション、インタラクティブな要素を備えた豊富なインターフェイスが含まれ、スタイリングにはTailwind CSSを使用します。

プレビューを開く

                <div class="relative inline-block text-left">
  <div>
    <button type="button" class="inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-blue-500 dark:focus:ring-blue-300" aria-expanded="true" aria-haspopup="true">
      Hover over me
    </button>
  </div>

  <div class="absolute z-10 hidden group-hover:block bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-md shadow-lg transition-opacity duration-300 ease-in-out opacity-0 group-hover:opacity-100">
    <div class="p-3">
      <div class="flex items-center space-x-3">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full object-cover">
        <div>
          <p class="text-sm leading-5 font-medium text-gray-900 dark:text-gray-100">John Doe</p>
          <p class="text-sm leading-5 text-gray-500 dark:text-gray-400">Senior Developer</p>
        </div>
      </div>
      <div class="mt-2 text-gray-600 dark:text-gray-300">
        <p class="text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum.</p>
      </div>
      <div class="mt-2 flex justify-end">
        <button class="px-3 py-1 bg-blue-500 dark:bg-blue-300 text-white dark:text-gray-800 rounded-md hover:bg-blue-600 dark:hover:bg-blue-400 transform transition-transform duration-300 hover:scale-105">Action</button>
      </div>
    </div>
  </div>
</div>

<style>
@media (prefers-reduced-motion: no-preference) {
  .transition-opacity {
    transition: opacity 0.5s ease-in-out;
  }
}
</style>

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

プレビューを開く

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

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

Tailwind CSS で構築された、微妙なマイクロインタラクションアニメーション、レスポンシブデザイン、ダークテーマのサポートを備えた、シンプルでありながら魅力的なツールチップコンポーネント。JavaScriptは必要ありません。

プレビューを開く

                <div class="flex justify-center items-center h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative group">
    <button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors duration-200">Hover Me</button>
    <div class="absolute bottom-full mb-2 left-1/2 transform -translate-x-1/2 px-3 py-2 bg-gray-800 text-white text-sm rounded opacity-0 group-hover:opacity-100 transition-opacity duration-300">
      Hello! I'm a Tooltip
    </div>
  </div>
</div>

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

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

プレビューを開く

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

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

ユーザーエンゲージメントのためのマイクロインタラクションを備えたレスポンシブツールチップコンポーネントで、ダークテーマと魅力的なアニメーションが特徴です。

プレビューを開く

                <div class="relative group">
    <button class="bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-300">
        Hover me
    </button>
    <div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-48 opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100">
        <div class="bg-gray-800 text-white p-2 rounded shadow-lg border border-gray-700">
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2" />
                <span class="font-semibold">John Doe</span>
            </div>
            <div>
                <p class="mt-1 text-sm">This is a tooltip message that provides additional information.</p>
            </div>
            <img src="https://picsum.photos/200/100" alt="Placeholder" class="mt-2 rounded" />
        </div>
    </div>
</div>
<!-- Dark mode support -->
<style>
    @media (prefers-color-scheme: dark) {
        .bg-gray-800 {
            background-color: #1f2937;
        }
        .border-gray-700 {
            border-color: #374151;
        }
    }
</style>

レトロなツールチップコンポーネント

レトロ/ビンテージをテーマにしたツールチップコンポーネントで、レスポンシブエフェクトとダークモードのサポートを備えています。

プレビューを開く

                <style>
  @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

  .tooltip-retro {
    font-family: 'Press Start 2P', cursive;
    position: relative;
    display: inline-block;
    cursor: pointer;
  }

  .tooltip-retro .tooltip-content {
    visibility: hidden;
    width: 120px;
    background-color: #33 некоторого number; /* Retro dark background */
    color: #0f0; /* Neon green text */
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
    border: 2px solid #0f0; /* Neon green border */
    box-shadow: 0 0 10px #0f0; /* Neon green glow */
  }

  .tooltip-retro .tooltip-content::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #0f0 transparent transparent transparent; /* Neon green triangle */
  }

  .tooltip-retro:hover .tooltip-content {
    visibility: visible;
    opacity: 1;
  }

  /* Dark Mode */
  @media (prefers-color-scheme: dark) {
    .tooltip-retro .tooltip-content {
      background-color: #0f0; /* Neon green background in dark mode */
      color: #333; /* Dark text in dark mode */
      border-color: #333; /* Dark border in dark mode */
      box-shadow: 0 0 10px #333; /* Dark glow in dark mode */
    }

    .tooltip-retro .tooltip-content::after {
      border-color: #333 transparent transparent transparent; /* Dark triangle in dark mode */
    }
  }

  /* Responsive effects */
  @media (max-width: 600px) {
    .tooltip-retro .tooltip-content {
      width: 80px;
      margin-left: -40px;
    }
  }
</style>

<div class="tooltip-retro">
  Hover over me
  <span class="tooltip-content">Retro Tooltip!</span>
</div>

カテゴリ

ツールチップ