CSS Tooltips 💡

Create beautiful, accessible, and interactive custom tooltips with modern CSS techniques and JavaScript enhancements.

Why Custom Tooltips Matter

Custom tooltips enhance user experience by providing contextual information, guidance, and additional details without cluttering the interface. They help users understand features and make informed decisions.

💡 Contextual Help

Provide relevant information when users need it

🎨 Design Consistency

Match your brand and design system

â™ŋ Accessibility

Keyboard navigation and screen reader support

Basic CSS Tooltips

Key Concepts:

  • Use :hover pseudo-class for display
  • Position with position: absolute
  • Create arrows with CSS borders
  • Add smooth transitions for better UX
  • Ensure proper z-index stacking

Basic Tooltips Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basic CSS Tooltips</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      line-height: 1.6;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      min-height: 100vh;
      padding: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .container {
      max-width: 1000px;
      margin: 0 auto;
      background: white;
      border-radius: 20px;
      padding: 3rem;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }
    
    h1 {
      color: #2d3748;
      margin-bottom: 2rem;
      text-align: center;
      font-size: 2.5rem;
    }
    
    .tooltip-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      margin: 2rem 0;
    }
    
    .tooltip-group {
      padding: 2rem;
      background: #f8fafc;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
    }
    
    .tooltip-title {
      font-weight: 600;
      color: #2d3748;
      margin-bottom: 1.5rem;
      font-size: 1.2rem;
    }
    
    /* Basic Tooltip */
    .tooltip {
      position: relative;
      display: inline-block;
      cursor: pointer;
    }
    
    .tooltip-text {
      position: absolute;
      background: #1f2937;
      color: white;
      padding: 8px 12px;
      border-radius: 6px;
      font-size: 0.875rem;
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
      z-index: 1000;
      pointer-events: none;
    }
    
    .tooltip:hover .tooltip-text {
      opacity: 1;
      visibility: visible;
    }
    
    /* Position Variants */
    .tooltip-top .tooltip-text {
      bottom: 125%;
      left: 50%;
      transform: translateX(-50%) translateY(-10px);
    }
    
    .tooltip-top:hover .tooltip-text {
      transform: translateX(-50%) translateY(0);
    }
    
    .tooltip-bottom .tooltip-text {
      top: 125%;
      left: 50%;
      transform: translateX(-50%) translateY(10px);
    }
    
    .tooltip-bottom:hover .tooltip-text {
      transform: translateX(-50%) translateY(0);
    }
    
    .tooltip-left .tooltip-text {
      right: 125%;
      top: 50%;
      transform: translateY(-50%) translateX(-10px);
    }
    
    .tooltip-left:hover .tooltip-text {
      transform: translateY(-50%) translateX(0);
    }
    
    .tooltip-right .tooltip-text {
      left: 125%;
      top: 50%;
      transform: translateY(-50%) translateX(10px);
    }
    
    .tooltip-right:hover .tooltip-text {
      transform: translateY(-50%) translateX(0);
    }
    
    /* Arrow Indicators */
    .tooltip-text::after {
      content: "";
      position: absolute;
      border: 5px solid transparent;
    }
    
    .tooltip-top .tooltip-text::after {
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border-top-color: #1f2937;
    }
    
    .tooltip-bottom .tooltip-text::after {
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      border-bottom-color: #1f2937;
    }
    
    .tooltip-left .tooltip-text::after {
      left: 100%;
      top: 50%;
      transform: translateY(-50%);
      border-left-color: #1f2937;
    }
    
    .tooltip-right .tooltip-text::after {
      right: 100%;
      top: 50%;
      transform: translateY(-50%);
      border-right-color: #1f2937;
    }
    
    /* Color Variants */
    .tooltip-primary .tooltip-text {
      background: #3b82f6;
    }
    
    .tooltip-primary.tooltip-top .tooltip-text::after {
      border-top-color: #3b82f6;
    }
    
    .tooltip-primary.tooltip-bottom .tooltip-text::after {
      border-bottom-color: #3b82f6;
    }
    
    .tooltip-primary.tooltip-left .tooltip-text::after {
      border-left-color: #3b82f6;
    }
    
    .tooltip-primary.tooltip-right .tooltip-text::after {
      border-right-color: #3b82f6;
    }
    
    .tooltip-success .tooltip-text {
      background: #10b981;
    }
    
    .tooltip-success.tooltip-top .tooltip-text::after {
      border-top-color: #10b981;
    }
    
    .tooltip-warning .tooltip-text {
      background: #f59e0b;
    }
    
    .tooltip-warning.tooltip-top .tooltip-text::after {
      border-top-color: #f59e0b;
    }
    
    .tooltip-danger .tooltip-text {
      background: #ef4444;
    }
    
    .tooltip-danger.tooltip-top .tooltip-text::after {
      border-top-color: #ef4444;
    }
    
    /* Demo Elements */
    .demo-element {
      display: inline-block;
      padding: 12px 24px;
      background: white;
      border: 2px solid #e2e8f0;
      border-radius: 8px;
      margin: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .demo-element:hover {
      border-color: #3b82f6;
      transform: translateY(-2px);
    }
    
    /* Demo Section */
    .demo-section {
      background: #f8fafc;
      padding: 2rem;
      border-radius: 15px;
      margin: 2rem 0;
      border-left: 4px solid #667eea;
    }
    
    .code-example {
      background: #2d3748;
      color: #81e6d9;
      padding: 1rem;
      border-radius: 8px;
      font-family: monospace;
      margin: 1rem 0;
      font-size: 0.9rem;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>💡 CSS Tooltips</h1>
    
    <div class="demo-section">
      <h2>Basic Tooltip Positions</h2>
      <div class="code-example">
        /* Tooltip Structure */<br>
        &lt;div class="tooltip tooltip-top"&gt;<br>
        &nbsp;&nbsp;&lt;span class="demo-element"&gt;Hover me&lt;/span&gt;<br>
        &nbsp;&nbsp;&lt;span class="tooltip-text"&gt;Tooltip text&lt;/span&gt;<br>
        &lt;/div&gt;
      </div>
      
      <div class="tooltip-grid">
        <div class="tooltip-group">
          <div class="tooltip-title">Position Variants</div>
          <div class="tooltip tooltip-top" style="display: block; text-align: center; margin: 2rem 0;">
            <span class="demo-element">Top Tooltip</span>
            <span class="tooltip-text">This is a top tooltip</span>
          </div>
          
          <div class="tooltip tooltip-bottom" style="display: block; text-align: center; margin: 2rem 0;">
            <span class="demo-element">Bottom Tooltip</span>
            <span class="tooltip-text">This is a bottom tooltip</span>
          </div>
          
          <div style="display: flex; justify-content: space-between; margin: 2rem 0;">
            <div class="tooltip tooltip-left">
              <span class="demo-element">Left</span>
              <span class="tooltip-text">Left tooltip</span>
            </div>
            
            <div class="tooltip tooltip-right">
              <span class="demo-element">Right</span>
              <span class="tooltip-text">Right tooltip</span>
            </div>
          </div>
        </div>
        
        <div class="tooltip-group">
          <div class="tooltip-title">Color Variants</div>
          <div style="text-align: center; margin: 1rem 0;">
            <div class="tooltip tooltip-top tooltip-primary" style="display: inline-block; margin: 0.5rem;">
              <span class="demo-element">Primary</span>
              <span class="tooltip-text">Primary tooltip</span>
            </div>
            
            <div class="tooltip tooltip-top tooltip-success" style="display: inline-block; margin: 0.5rem;">
              <span class="demo-element">Success</span>
              <span class="tooltip-text">Success tooltip</span>
            </div>
          </div>
          
          <div style="text-align: center; margin: 1rem 0;">
            <div class="tooltip tooltip-top tooltip-warning" style="display: inline-block; margin: 0.5rem;">
              <span class="demo-element">Warning</span>
              <span class="tooltip-text">Warning tooltip</span>
            </div>
            
            <div class="tooltip tooltip-top tooltip-danger" style="display: inline-block; margin: 0.5rem;">
              <span class="demo-element">Danger</span>
              <span class="tooltip-text">Danger tooltip</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="demo-section">
      <h2>Interactive Examples</h2>
      <div class="code-example">
        /* Multi-line Tooltips */<br>
        Use white-space: normal for longer content<br>
        Set max-width for better readability<br>
        Add padding for comfortable reading
      </div>
      
      <div class="tooltip-grid">
        <div class="tooltip-group">
          <div class="tooltip-title">Form Field Tooltips</div>
          <div style="margin: 1rem 0;">
            <label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">
              Email Address
              <div class="tooltip tooltip-top" style="display: inline-block; margin-left: 0.5rem;">
                <span style="color: #6b7280; cursor: help;">ℹī¸</span>
                <span class="tooltip-text" style="white-space: normal; width: 200px;">
                  Enter your primary email address for account verification
                </span>
              </div>
            </label>
            <input type="email" style="width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px;">
          </div>
          
          <div style="margin: 1rem 0;">
            <label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">
              Password
              <div class="tooltip tooltip-top" style="display: inline-block; margin-left: 0.5rem;">
                <span style="color: #6b7280; cursor: help;">ℹī¸</span>
                <span class="tooltip-text" style="white-space: normal; width: 200px;">
                  Must contain at least 8 characters with numbers and symbols
                </span>
              </div>
            </label>
            <input type="password" style="width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px;">
          </div>
        </div>
        
        <div class="tooltip-group">
          <div class="tooltip-title">Icon Tooltips</div>
          <div style="display: flex; justify-content: space-around; margin: 2rem 0;">
            <div class="tooltip tooltip-top">
              <button style="padding: 12px; border: none; background: #3b82f6; color: white; border-radius: 8px; cursor: pointer;">
                📧
              </button>
              <span class="tooltip-text">Send Email</span>
            </div>
            
            <div class="tooltip tooltip-top">
              <button style="padding: 12px; border: none; background: #10b981; color: white; border-radius: 8px; cursor: pointer;">
                💾
              </button>
              <span class="tooltip-text">Save Document</span>
            </div>
            
            <div class="tooltip tooltip-top">
              <button style="padding: 12px; border: none; background: #f59e0b; color: white; border-radius: 8px; cursor: pointer;">
                🖨ī¸
              </button>
              <span class="tooltip-text">Print File</span>
            </div>
            
            <div class="tooltip tooltip-top">
              <button style="padding: 12px; border: none; background: #ef4444; color: white; border-radius: 8px; cursor: pointer;">
                🗑ī¸
              </button>
              <span class="tooltip-text">Delete Item</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    // Add interactive functionality
    const tooltips = document.querySelectorAll('.tooltip');
    
    // Add click feedback for demo elements
    const demoElements = document.querySelectorAll('.demo-element');
    
    demoElements.forEach(element => {
      element.addEventListener('click', function() {
        this.style.transform = 'scale(0.95)';
        setTimeout(() => {
          this.style.transform = 'scale(1)';
        }, 150);
      });
    });
    
    // Log tooltip interactions
    tooltips.forEach(tooltip => {
      tooltip.addEventListener('mouseenter', function() {
        const tooltipText = this.querySelector('.tooltip-text').textContent;
        console.log(`Tooltip shown: "${tooltipText}"`);
      });
    });
  </script>
</body>
</html>

Advanced CSS Tooltips

Visual Enhancements

Create engaging tooltips with animations, rich content, gradients, and interactive elements that improve user engagement.

Scale and 3D animations
Rich content cards
Gradient backgrounds

Interactive Features

Implement delayed appearances, interactive content, and custom animations that make tooltips more useful and engaging.

Delayed appearances
Interactive buttons
Custom easing

Advanced Tooltips Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Advanced CSS Tooltips</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      line-height: 1.6;
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      min-height: 100vh;
      padding: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      background: white;
      border-radius: 20px;
      padding: 3rem;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }
    
    h1 {
      color: #2d3748;
      margin-bottom: 2rem;
      text-align: center;
      font-size: 2.5rem;
    }
    
    .tooltip-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      margin: 2rem 0;
    }
    
    .tooltip-group {
      padding: 2rem;
      background: #f8fafc;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
    }
    
    .tooltip-title {
      font-weight: 600;
      color: #2d3748;
      margin-bottom: 1.5rem;
      font-size: 1.2rem;
    }
    
    /* Animated Tooltip */
    .tooltip-animated {
      position: relative;
      display: inline-block;
      cursor: pointer;
    }
    
    .tooltip-animated .tooltip-text {
      position: absolute;
      background: linear-gradient(135deg, #667eea, #764ba2);
      color: white;
      padding: 12px 16px;
      border-radius: 8px;
      font-size: 0.875rem;
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      transform: scale(0.8);
      transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      z-index: 1000;
      pointer-events: none;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    }
    
    .tooltip-animated:hover .tooltip-text {
      opacity: 1;
      visibility: visible;
      transform: scale(1);
    }
    
    .tooltip-animated.tooltip-top .tooltip-text {
      bottom: 125%;
      left: 50%;
      transform: translateX(-50%) scale(0.8);
    }
    
    .tooltip-animated.tooltip-top:hover .tooltip-text {
      transform: translateX(-50%) scale(1);
    }
    
    /* Rich Content Tooltip */
    .tooltip-rich {
      position: relative;
      display: inline-block;
      cursor: pointer;
    }
    
    .tooltip-rich .tooltip-content {
      position: absolute;
      background: white;
      color: #1f2937;
      padding: 0;
      border-radius: 12px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: all 0.3s ease;
      z-index: 1000;
      pointer-events: none;
      width: 280px;
      overflow: hidden;
    }
    
    .tooltip-rich:hover .tooltip-content {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    
    .tooltip-header {
      background: linear-gradient(135deg, #667eea, #764ba2);
      color: white;
      padding: 1rem;
    }
    
    .tooltip-body {
      padding: 1rem;
    }
    
    .tooltip-footer {
      padding: 0.75rem 1rem;
      background: #f8fafc;
      border-top: 1px solid #e5e7eb;
      font-size: 0.875rem;
      color: #6b7280;
    }
    
    .tooltip-rich.tooltip-top .tooltip-content {
      bottom: 125%;
      left: 50%;
      transform: translateX(-50%) translateY(-10px);
    }
    
    .tooltip-rich.tooltip-top:hover .tooltip-content {
      transform: translateX(-50%) translateY(0);
    }
    
    .tooltip-rich .tooltip-content::after {
      content: "";
      position: absolute;
      border: 8px solid transparent;
      border-top-color: white;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
    }
    
    /* Gradient Tooltip */
    .tooltip-gradient {
      position: relative;
      display: inline-block;
      cursor: pointer;
    }
    
    .tooltip-gradient .tooltip-text {
      position: absolute;
      background: linear-gradient(135deg, #ff9a9e, #fecfef);
      color: #1f2937;
      padding: 10px 14px;
      border-radius: 8px;
      font-size: 0.875rem;
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-5px) rotateX(-90deg);
      transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      z-index: 1000;
      pointer-events: none;
      transform-origin: bottom center;
    }
    
    .tooltip-gradient:hover .tooltip-text {
      opacity: 1;
      visibility: visible;
      transform: translateY(0) rotateX(0);
    }
    
    .tooltip-gradient.tooltip-top .tooltip-text {
      bottom: 125%;
      left: 50%;
      transform: translateX(-50%) translateY(-5px) rotateX(-90deg);
    }
    
    .tooltip-gradient.tooltip-top:hover .tooltip-text {
      transform: translateX(-50%) translateY(0) rotateX(0);
    }
    
    /* Delay Tooltip */
    .tooltip-delay {
      position: relative;
      display: inline-block;
      cursor: pointer;
    }
    
    .tooltip-delay .tooltip-text {
      position: absolute;
      background: #1f2937;
      color: white;
      padding: 8px 12px;
      border-radius: 6px;
      font-size: 0.875rem;
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: all 0.3s ease;
      transition-delay: 0.5s;
      z-index: 1000;
      pointer-events: none;
    }
    
    .tooltip-delay:hover .tooltip-text {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      transition-delay: 0s;
    }
    
    .tooltip-delay.tooltip-top .tooltip-text {
      bottom: 125%;
      left: 50%;
      transform: translateX(-50%) translateY(-10px);
    }
    
    .tooltip-delay.tooltip-top:hover .tooltip-text {
      transform: translateX(-50%) translateY(0);
    }
    
    /* Interactive Tooltip */
    .tooltip-interactive {
      position: relative;
      display: inline-block;
      cursor: pointer;
    }
    
    .tooltip-interactive .tooltip-content {
      position: absolute;
      background: white;
      color: #1f2937;
      padding: 1rem;
      border-radius: 12px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: all 0.3s ease;
      z-index: 1000;
      width: 200px;
      pointer-events: none;
    }
    
    .tooltip-interactive:hover .tooltip-content {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
      pointer-events: all;
    }
    
    .tooltip-interactive.tooltip-top .tooltip-content {
      bottom: 125%;
      left: 50%;
      transform: translateX(-50%) translateY(-10px);
    }
    
    .tooltip-interactive.tooltip-top:hover .tooltip-content {
      transform: translateX(-50%) translateY(0);
    }
    
    .tooltip-actions {
      display: flex;
      gap: 0.5rem;
      margin-top: 0.75rem;
    }
    
    .tooltip-btn {
      padding: 6px 12px;
      border: none;
      border-radius: 6px;
      font-size: 0.75rem;
      cursor: pointer;
      transition: background 0.2s ease;
    }
    
    .tooltip-btn-primary {
      background: #3b82f6;
      color: white;
    }
    
    .tooltip-btn-secondary {
      background: #e5e7eb;
      color: #374151;
    }
    
    /* Demo Elements */
    .demo-element {
      display: inline-block;
      padding: 12px 24px;
      background: white;
      border: 2px solid #e2e8f0;
      border-radius: 8px;
      margin: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .demo-element:hover {
      border-color: #3b82f6;
      transform: translateY(-2px);
    }
    
    /* Demo Section */
    .demo-section {
      background: #f8fafc;
      padding: 2rem;
      border-radius: 15px;
      margin: 2rem 0;
      border-left: 4px solid #4facfe;
    }
    
    .code-example {
      background: #2d3748;
      color: #81e6d9;
      padding: 1rem;
      border-radius: 8px;
      font-family: monospace;
      margin: 1rem 0;
      font-size: 0.9rem;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>🚀 Advanced CSS Tooltips</h1>
    
    <div class="demo-section">
      <h2>Animated Tooltips</h2>
      <div class="code-example">
        /* Advanced Animations */<br>
        Transform scales and rotations<br>
        Custom easing functions<br>
        Smooth transitions
      </div>
      
      <div class="tooltip-grid">
        <div class="tooltip-group">
          <div class="tooltip-title">Scale Animation</div>
          <div style="text-align: center; margin: 2rem 0;">
            <div class="tooltip-animated tooltip-top" style="display: inline-block;">
              <span class="demo-element">Scale Effect</span>
              <span class="tooltip-text">Scaling tooltip animation</span>
            </div>
          </div>
        </div>
        
        <div class="tooltip-group">
          <div class="tooltip-title">3D Rotation</div>
          <div style="text-align: center; margin: 2rem 0;">
            <div class="tooltip-gradient tooltip-top" style="display: inline-block;">
              <span class="demo-element">3D Flip</span>
              <span class="tooltip-text">3D rotation effect</span>
            </div>
          </div>
        </div>
        
        <div class="tooltip-group">
          <div class="tooltip-title">Delayed Appearance</div>
          <div style="text-align: center; margin: 2rem 0;">
            <div class="tooltip-delay tooltip-top" style="display: inline-block;">
              <span class="demo-element">Hover & Wait</span>
              <span class="tooltip-text">I appear after 0.5s delay</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="demo-section">
      <h2>Rich Content Tooltips</h2>
      <div class="code-example">
        /* Rich Content Support */<br>
        Multiple sections (header, body, footer)<br>
        Custom styling and layouts<br>
        Interactive elements
      </div>
      
      <div class="tooltip-grid">
        <div class="tooltip-group">
          <div class="tooltip-title">Card Style Tooltip</div>
          <div style="text-align: center; margin: 2rem 0;">
            <div class="tooltip-rich tooltip-top" style="display: inline-block;">
              <span class="demo-element">Product Info</span>
              <div class="tooltip-content">
                <div class="tooltip-header">
                  <h4 style="margin: 0; font-size: 1rem;">Premium Feature</h4>
                </div>
                <div class="tooltip-body">
                  <p style="margin: 0; font-size: 0.875rem; color: #6b7280;">
                    Access advanced analytics and reporting features with our premium plan.
                  </p>
                </div>
                <div class="tooltip-footer">
                  Learn more about upgrades
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="tooltip-group">
          <div class="tooltip-title">Interactive Tooltip</div>
          <div style="text-align: center; margin: 2rem 0;">
            <div class="tooltip-interactive tooltip-top" style="display: inline-block;">
              <span class="demo-element">Quick Actions</span>
              <div class="tooltip-content">
                <p style="margin: 0 0 0.75rem 0; font-size: 0.875rem;">
                  Choose an action:
                </p>
                <div class="tooltip-actions">
                  <button class="tooltip-btn tooltip-btn-primary">Edit</button>
                  <button class="tooltip-btn tooltip-btn-secondary">View</button>
                  <button class="tooltip-btn tooltip-btn-secondary">Share</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="demo-section">
      <h2>Special Effects</h2>
      <div class="code-example">
        /* Visual Effects */<br>
        Gradient backgrounds<br>
        Shadow effects<br>
        Custom animations
      </div>
      
      <div class="tooltip-grid">
        <div class="tooltip-group">
          <div class="tooltip-title">Gradient Tooltips</div>
          <div style="text-align: center; margin: 1rem 0;">
            <div class="tooltip-gradient tooltip-top" style="display: inline-block; margin: 0.5rem;">
              <span class="demo-element" style="background: linear-gradient(135deg, #ff9a9e, #fecfef); border: none; color: #1f2937;">
                Pink Gradient
              </span>
              <span class="tooltip-text">Beautiful gradient tooltip</span>
            </div>
            
            <div class="tooltip-animated tooltip-top" style="display: inline-block; margin: 0.5rem;">
              <span class="demo-element" style="background: linear-gradient(135deg, #a8edea, #fed6e3); border: none; color: #1f2937;">
                Blue Gradient
              </span>
              <span class="tooltip-text">Animated gradient effect</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    // Interactive tooltip functionality
    const interactiveTooltips = document.querySelectorAll('.tooltip-interactive');
    
    interactiveTooltips.forEach(tooltip => {
      const buttons = tooltip.querySelectorAll('.tooltip-btn');
      
      buttons.forEach(button => {
        button.addEventListener('click', function(e) {
          e.stopPropagation();
          const action = this.textContent;
          console.log(`Action clicked: ${action}`);
          
          // Close the tooltip after action
          tooltip.querySelector('.tooltip-content').style.opacity = '0';
          tooltip.querySelector('.tooltip-content').style.visibility = 'hidden';
        });
      });
    });
    
    // Rich tooltip interactions
    const richTooltips = document.querySelectorAll('.tooltip-rich');
    
    richTooltips.forEach(tooltip => {
      tooltip.addEventListener('mouseenter', function() {
        console.log('Rich tooltip opened');
      });
      
      tooltip.addEventListener('mouseleave', function() {
        console.log('Rich tooltip closed');
      });
    });
    
    // Animation performance logging
    const animatedTooltips = document.querySelectorAll('.tooltip-animated, .tooltip-gradient');
    
    animatedTooltips.forEach(tooltip => {
      tooltip.addEventListener('mouseenter', function() {
        console.log('Animated tooltip triggered');
      });
    });
  </script>
</body>
</html>

Mobile-Optimized Tooltips

Touch-Friendly Design

Mobile devices require different interaction patterns. Implement tap-to-show tooltips, bottom sheets, and fixed-position tooltips that work well on touch screens.

tap-to-show functionality
Large touch targets (56px+)
Bottom-aligned for thumb reach

Mobile-Optimized Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Mobile-Optimized Tooltips</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      line-height: 1.6;
      background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
      min-height: 100vh;
      padding: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .container {
      max-width: 400px;
      margin: 0 auto;
      background: white;
      border-radius: 20px;
      padding: 2rem;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }
    
    h1 {
      color: #2d3748;
      margin-bottom: 1.5rem;
      text-align: center;
      font-size: 1.8rem;
    }
    
    .tooltip-group {
      margin-bottom: 2rem;
      padding: 1.5rem;
      background: #f8fafc;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
    }
    
    .tooltip-title {
      font-weight: 600;
      color: #2d3748;
      margin-bottom: 1rem;
      font-size: 1.1rem;
    }
    
    /* Mobile Tooltip */
    .mobile-tooltip {
      position: relative;
      display: inline-block;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    
    .mobile-tooltip .tooltip-text {
      position: absolute;
      background: #1f2937;
      color: white;
      padding: 12px 16px;
      border-radius: 8px;
      font-size: 0.875rem;
      white-space: normal;
      max-width: 250px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: all 0.3s ease;
      z-index: 1000;
      pointer-events: none;
      text-align: center;
    }
    
    .mobile-tooltip.active .tooltip-text {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    
    .mobile-tooltip.tooltip-top .tooltip-text {
      bottom: 125%;
      left: 50%;
      transform: translateX(-50%) translateY(-10px);
    }
    
    .mobile-tooltip.tooltip-top.active .tooltip-text {
      transform: translateX(-50%) translateY(0);
    }
    
    .mobile-tooltip .tooltip-text::after {
      content: "";
      position: absolute;
      border: 6px solid transparent;
    }
    
    .mobile-tooltip.tooltip-top .tooltip-text::after {
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border-top-color: #1f2937;
    }
    
    /* Touch Tooltip */
    .touch-tooltip {
      position: relative;
      display: inline-block;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    
    .touch-tooltip .tooltip-content {
      position: fixed;
      bottom: 20px;
      left: 20px;
      right: 20px;
      background: white;
      color: #1f2937;
      padding: 1rem;
      border-radius: 12px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      opacity: 0;
      visibility: hidden;
      transform: translateY(20px);
      transition: all 0.3s ease;
      z-index: 1001;
      pointer-events: none;
    }
    
    .touch-tooltip.active .tooltip-content {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    
    .touch-tooltip-close {
      position: absolute;
      top: 8px;
      right: 8px;
      background: none;
      border: none;
      font-size: 1.25rem;
      cursor: pointer;
      padding: 4px;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: background 0.2s ease;
    }
    
    .touch-tooltip-close:active {
      background: #f1f5f9;
    }
    
    /* Bottom Sheet Tooltip */
    .bottomsheet-tooltip {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: white;
      border-radius: 20px 20px 0 0;
      box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.2);
      transform: translateY(100%);
      transition: transform 0.3s ease;
      z-index: 1002;
      padding: 2rem 1.5rem;
      max-height: 60vh;
      overflow-y: auto;
    }
    
    .bottomsheet-tooltip.active {
      transform: translateY(0);
    }
    
    .bottomsheet-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid #e2e8f0;
    }
    
    .bottomsheet-close {
      background: none;
      border: none;
      font-size: 1.5rem;
      cursor: pointer;
      padding: 0;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: background 0.2s ease;
    }
    
    .bottomsheet-close:active {
      background: #f1f5f9;
    }
    
    /* Demo Elements */
    .mobile-demo-element {
      display: inline-block;
      padding: 16px 24px;
      background: white;
      border: 2px solid #e2e8f0;
      border-radius: 12px;
      margin: 8px;
      cursor: pointer;
      transition: all 0.2s ease;
      min-height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    
    .mobile-demo-element:active {
      background: #f8fafc;
      transform: scale(0.98);
    }
    
    /* Overlay */
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }
    
    .overlay.active {
      opacity: 1;
      visibility: visible;
    }
    
    /* Demo Section */
    .demo-section {
      background: #f8fafc;
      padding: 1.5rem;
      border-radius: 12px;
      margin: 1.5rem 0;
      border-left: 4px solid #ff9a9e;
    }
    
    .code-example {
      background: #2d3748;
      color: #81e6d9;
      padding: 1rem;
      border-radius: 8px;
      font-family: monospace;
      margin: 1rem 0;
      font-size: 0.8rem;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>📱 Mobile Tooltips</h1>
    
    <div class="demo-section">
      <h2>Touch-Optimized Tooltips</h2>
      <div class="code-example">
        /* Mobile tooltip patterns */<br>
        Tap to show/hide<br>
        Large touch targets<br>
        Mobile-appropriate positioning
      </div>
      
      <div class="tooltip-group">
        <div class="tooltip-title">Tap to Reveal</div>
        <div style="text-align: center; margin: 1rem 0;">
          <div class="mobile-tooltip tooltip-top" onclick="toggleMobileTooltip(this)">
            <span class="mobile-demo-element">Tap Me</span>
            <span class="tooltip-text">This tooltip appears on tap and stays until you tap elsewhere</span>
          </div>
        </div>
        
        <div style="text-align: center; margin: 1rem 0;">
          <div class="mobile-tooltip tooltip-top" onclick="toggleMobileTooltip(this)">
            <span class="mobile-demo-element">Information</span>
            <span class="tooltip-text">Useful information that helps users understand the interface better</span>
          </div>
        </div>
      </div>
    </div>
    
    <div class="demo-section">
      <h2>Fixed Position Tooltips</h2>
      <div class="code-example">
        /* Fixed positioning for mobile */<br>
        Bottom-aligned for thumb reach<br>
        Easy dismissal<br>
        Clear visual hierarchy
      </div>
      
      <div class="tooltip-group">
        <div class="tooltip-title">Bottom Tooltip</div>
        <div style="text-align: center; margin: 1rem 0;">
          <div class="touch-tooltip" onclick="showTouchTooltip()">
            <span class="mobile-demo-element">Show Help</span>
          </div>
        </div>
      </div>
    </div>
    
    <div class="demo-section">
      <h2>Bottom Sheet Tooltips</h2>
      <div class="code-example">
        /* Bottom sheet pattern */<br>
        Native mobile experience<br>
        Rich content support<br>
        Smooth animations
      </div>
      
      <div class="tooltip-group">
        <div class="tooltip-title">Detailed Information</div>
        <div style="text-align: center; margin: 1rem 0;">
          <div class="touch-tooltip" onclick="showBottomSheet()">
            <span class="mobile-demo-element">View Details</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Touch Tooltip -->
  <div class="touch-tooltip-content" id="touchTooltip">
    <button class="touch-tooltip-close" onclick="hideTouchTooltip()">×</button>
    <h4 style="margin: 0 0 0.5rem 0; color: #1f2937;">Help & Guidance</h4>
    <p style="margin: 0; color: #6b7280; font-size: 0.875rem;">
      This feature helps you manage your account settings and preferences. You can customize notifications, privacy settings, and more from this section.
    </p>
  </div>

  <!-- Bottom Sheet Tooltip -->
  <div class="bottomsheet-tooltip" id="bottomSheetTooltip">
    <div class="bottomsheet-header">
      <h3 style="margin: 0;">Feature Details</h3>
      <button class="bottomsheet-close" onclick="hideBottomSheet()">×</button>
    </div>
    
    <div style="margin-bottom: 1rem;">
      <h4 style="margin: 0 0 0.5rem 0; color: #1f2937;">Advanced Analytics</h4>
      <p style="margin: 0; color: #6b7280; font-size: 0.875rem; line-height: 1.5;">
        Get detailed insights into your performance metrics with our advanced analytics dashboard. Track key metrics, visualize trends, and make data-driven decisions.
      </p>
    </div>
    
    <div style="margin-bottom: 1rem;">
      <h4 style="margin: 0 0 0.5rem 0; color: #1f2937;">Key Benefits</h4>
      <ul style="margin: 0; padding-left: 1.25rem; color: #6b7280; font-size: 0.875rem;">
        <li>Real-time data visualization</li>
        <li>Customizable reports</li>
        <li>Export capabilities</li>
        <li>Team collaboration features</li>
      </ul>
    </div>
    
    <button style="width: 100%; padding: 12px; background: #3b82f6; color: white; border: none; border-radius: 8px; font-size: 1rem; cursor: pointer;">
      Enable Feature
    </button>
  </div>

  <!-- Overlay -->
  <div class="overlay" id="overlay" onclick="hideAllTooltips()"></div>

  <script>
    // Mobile tooltip functionality
    function toggleMobileTooltip(element) {
      // Close all other mobile tooltips
      document.querySelectorAll('.mobile-tooltip').forEach(tooltip => {
        if (tooltip !== element) {
          tooltip.classList.remove('active');
        }
      });
      
      // Toggle current tooltip
      element.classList.toggle('active');
    }
    
    // Close mobile tooltips when clicking outside
    document.addEventListener('click', function(event) {
      if (!event.target.closest('.mobile-tooltip')) {
        document.querySelectorAll('.mobile-tooltip').forEach(tooltip => {
          tooltip.classList.remove('active');
        });
      }
    });
    
    // Touch tooltip functions
    function showTouchTooltip() {
      document.getElementById('touchTooltip').classList.add('active');
      document.getElementById('overlay').classList.add('active');
    }
    
    function hideTouchTooltip() {
      document.getElementById('touchTooltip').classList.remove('active');
      document.getElementById('overlay').classList.remove('active');
    }
    
    // Bottom sheet functions
    function showBottomSheet() {
      document.getElementById('bottomSheetTooltip').classList.add('active');
      document.getElementById('overlay').classList.add('active');
    }
    
    function hideBottomSheet() {
      document.getElementById('bottomSheetTooltip').classList.remove('active');
      document.getElementById('overlay').classList.remove('active');
    }
    
    // Close all tooltips
    function hideAllTooltips() {
      hideTouchTooltip();
      hideBottomSheet();
      document.querySelectorAll('.mobile-tooltip').forEach(tooltip => {
        tooltip.classList.remove('active');
      });
    }
    
    // Log interactions for demo
    const mobileElements = document.querySelectorAll('.mobile-demo-element');
    mobileElements.forEach(element => {
      element.addEventListener('click', function() {
        console.log('Mobile tooltip element tapped');
      });
    });
  </script>
</body>
</html>

Accessibility & Best Practices

đŸŽ¯ Keyboard Access

Focusable triggers and keyboard navigation

🌈 ARIA Attributes

Proper roles, descriptions, and relationships

📝 Screen Readers

Clear announcements and non-interference

Accessibility Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Accessible CSS Tooltips</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      line-height: 1.6;
      background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
      min-height: 100vh;
      padding: 2rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .container {
      max-width: 800px;
      margin: 0 auto;
      background: white;
      border-radius: 20px;
      padding: 3rem;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }
    
    h1 {
      color: #2d3748;
      margin-bottom: 2rem;
      text-align: center;
      font-size: 2.5rem;
    }
    
    .tooltip-group {
      margin-bottom: 2rem;
      padding: 1.5rem;
      background: #f8fafc;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
    }
    
    .tooltip-title {
      font-weight: 600;
      color: #2d3748;
      margin-bottom: 1rem;
      font-size: 1.1rem;
    }
    
    .accessibility-note {
      background: #e6fffa;
      border: 1px solid #81e6d9;
      border-radius: 8px;
      padding: 1rem;
      margin: 1rem 0;
      font-size: 0.9rem;
    }
    
    .accessibility-note.error {
      background: #fed7d7;
      border-color: #feb2b2;
    }
    
    /* Accessible Tooltip */
    .acc-tooltip {
      position: relative;
      display: inline-block;
      cursor: pointer;
    }
    
    .acc-tooltip .tooltip-text {
      position: absolute;
      background: #1f2937;
      color: white;
      padding: 8px 12px;
      border-radius: 6px;
      font-size: 0.875rem;
      white-space: nowrap;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: all 0.3s ease;
      z-index: 1000;
      pointer-events: none;
    }
    
    .acc-tooltip:hover .tooltip-text,
    .acc-tooltip:focus .tooltip-text {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }
    
    .acc-tooltip.tooltip-top .tooltip-text {
      bottom: 125%;
      left: 50%;
      transform: translateX(-50%) translateY(-10px);
    }
    
    .acc-tooltip.tooltip-top:hover .tooltip-text,
    .acc-tooltip.tooltip-top:focus .tooltip-text {
      transform: translateX(-50%) translateY(0);
    }
    
    .acc-tooltip .tooltip-text::after {
      content: "";
      position: absolute;
      border: 5px solid transparent;
    }
    
    .acc-tooltip.tooltip-top .tooltip-text::after {
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      border-top-color: #1f2937;
    }
    
    /* Focus States */
    .acc-tooltip:focus {
      outline: 2px solid #3b82f6;
      outline-offset: 2px;
    }
    
    /* High Contrast Support */
    @media (prefers-contrast: high) {
      .acc-tooltip .tooltip-text {
        border: 2px solid white;
      }
      
      .acc-tooltip:focus {
        outline: 3px solid #3b82f6;
      }
    }
    
    /* Reduced Motion Support */
    @media (prefers-reduced-motion: reduce) {
      .acc-tooltip .tooltip-text {
        transition: none;
      }
    }
    
    /* Screen Reader Only Text */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    
    /* ARIA Examples */
    .aria-example {
      background: #f0f9ff;
      border: 1px solid #7dd3fc;
      border-radius: 8px;
      padding: 1rem;
      margin: 1rem 0;
    }
    
    /* Demo Elements */
    .demo-element {
      display: inline-block;
      padding: 12px 24px;
      background: white;
      border: 2px solid #e2e8f0;
      border-radius: 8px;
      margin: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .demo-element:hover {
      border-color: #3b82f6;
    }
    
    /* Demo Section */
    .demo-section {
      background: #f8fafc;
      padding: 2rem;
      border-radius: 15px;
      margin: 2rem 0;
      border-left: 4px solid #a8edea;
    }
    
    .code-example {
      background: #2d3748;
      color: #81e6d9;
      padding: 1rem;
      border-radius: 8px;
      font-family: monospace;
      margin: 1rem 0;
      font-size: 0.9rem;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>â™ŋ Accessible Tooltips</h1>
    
    <div class="demo-section">
      <h2>Keyboard Navigation & Focus</h2>
      <div class="code-example">
        /* Keyboard Support */<br>
        Focusable tooltip triggers<br>
        Clear focus indicators<br>
        Keyboard-triggered tooltips
      </div>
      
      <div class="accessibility-note">
        ✅ <strong>Good:</strong> Tooltips should be accessible via keyboard navigation and have clear focus states.
      </div>
      
      <div class="tooltip-group">
        <div class="tooltip-title">Try navigating with Tab key:</div>
        <div style="text-align: center; margin: 2rem 0;">
          <div class="acc-tooltip tooltip-top" tabindex="0">
            <span class="demo-element">Focusable Tooltip</span>
            <span class="tooltip-text">This tooltip works with keyboard focus</span>
          </div>
        </div>
      </div>
    </div>
    
    <div class="demo-section">
      <h2>ARIA Attributes & Semantics</h2>
      <div class="code-example">
        /* ARIA Implementation */<br>
        aria-describedby for relationship<br>
        role="tooltip" for semantics<br>
        Proper label associations
      </div>
      
      <div class="aria-example">
        <strong>ARIA Best Practices:</strong>
        <ul style="margin-top: 0.5rem; padding-left: 1.5rem;">
          <li>Use <code>aria-describedby</code> to associate tooltip with trigger</li>
          <li>Add <code>role="tooltip"</code> to tooltip content</li>
          <li>Ensure tooltips Don&apos;t interfere with other content</li>
          <li>Provide alternative access to tooltip information</li>
        </ul>
      </div>
      
      <div class="tooltip-group">
        <div class="tooltip-title">ARIA Enhanced Tooltip</div>
        <div style="text-align: center; margin: 2rem 0;">
          <button class="acc-tooltip tooltip-top" 
                  aria-describedby="tooltip1"
                  style="padding: 12px 24px; background: #3b82f6; color: white; border: none; border-radius: 8px; cursor: pointer;">
            Button with Tooltip
          </button>
          <div id="tooltip1" role="tooltip" class="tooltip-text">
            This button saves your current progress
          </div>
        </div>
      </div>
    </div>
    
    <div class="demo-section">
      <h2>Screen Reader Compatibility</h2>
      <div class="code-example">
        /* Screen Reader Support */<br>
        Proper announcement timing<br>
        Contextual information<br>
        Non-interference with navigation
      </div>
      
      <div class="accessibility-note">
        ✅ <strong>Good:</strong> Screen readers should properly announce tooltips without interrupting user workflow.
      </div>
      
      <div class="tooltip-group">
        <div class="tooltip-title">Screen Reader Friendly</div>
        
        <div style="margin: 1rem 0;">
          <label style="display: block; margin-bottom: 0.5rem; font-weight: 500;">
            Username
            <span class="sr-only">: Required field, must be unique</span>
          </label>
          <input type="text" style="width: 100%; padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 6px;">
        </div>
        
        <div style="text-align: center; margin: 2rem 0;">
          <div class="acc-tooltip tooltip-top" tabindex="0" aria-describedby="sr-tooltip">
            <span class="demo-element">Accessible Element</span>
            <span id="sr-tooltip" role="tooltip" class="tooltip-text">
              Additional information for screen reader users
            </span>
          </div>
        </div>
      </div>
    </div>
    
    <div class="demo-section">
      <h2>Alternative Access Methods</h2>
      <div class="code-example">
        /* Multiple Access Methods */<br>
        Click/tap for mobile<br>
        Hover for desktop<br>
        Focus for keyboard<br>
        Always-visible alternatives
      </div>
      
      <div class="accessibility-note">
        ✅ <strong>Good:</strong> Provide multiple ways to access tooltip information to accommodate different user needs and devices.
      </div>
      
      <div class="tooltip-group">
        <div class="tooltip-title">Multi-Access Tooltip</div>
        <div style="text-align: center; margin: 2rem 0;">
          <div class="acc-tooltip tooltip-top" tabindex="0" onclick="toggleTooltip(this)">
            <span class="demo-element">Multi-Access</span>
            <span class="tooltip-text">Works with hover, focus, and click</span>
          </div>
        </div>
        
        <div style="background: #f3f4f6; padding: 1rem; border-radius: 8px; margin-top: 1rem;">
          <h4 style="margin: 0 0 0.5rem 0; color: #374151;">Alternative Information</h4>
          <p style="margin: 0; color: #6b7280; font-size: 0.875rem;">
            For users who cannot access tooltips, this permanent information provides the same content.
          </p>
        </div>
      </div>
    </div>
  </div>

  <script>
    // Accessible tooltip functionality
    const accTooltips = document.querySelectorAll('.acc-tooltip');
    
    // Toggle tooltip on click for mobile/alternative access
    function toggleTooltip(element) {
      const tooltip = element.querySelector('.tooltip-text');
      const isVisible = tooltip.style.visibility === 'visible';
      
      if (isVisible) {
        tooltip.style.opacity = '0';
        tooltip.style.visibility = 'hidden';
      } else {
        tooltip.style.opacity = '1';
        tooltip.style.visibility = 'visible';
      }
    }
    
    // Close tooltips when pressing Escape
    document.addEventListener('keydown', function(event) {
      if (event.key === 'Escape') {
        accTooltips.forEach(tooltip => {
          const tooltipText = tooltip.querySelector('.tooltip-text');
          tooltipText.style.opacity = '0';
          tooltipText.style.visibility = 'hidden';
        });
      }
    });
    
    // Log accessibility events
    accTooltips.forEach(tooltip => {
      tooltip.addEventListener('focus', function() {
        console.log('Tooltip focused via keyboard');
      });
      
      tooltip.addEventListener('click', function() {
        console.log('Tooltip activated via click');
      });
    });
    
    // Simulate screen reader announcement
    function announceTooltip(message) {
      const announcement = document.createElement('div');
      announcement.setAttribute('aria-live', 'polite');
      announcement.setAttribute('aria-atomic', 'true');
      announcement.style.position = 'absolute';
      announcement.style.left = '-10000px';
      announcement.textContent = message;
      document.body.appendChild(announcement);
      
      setTimeout(() => {
        document.body.removeChild(announcement);
      }, 1000);
    }
  </script>
</body>
</html>

Best Practices & Common Pitfalls

✅ Do This

  • Keep tooltip content concise and helpful
  • Use appropriate timing and delays
  • Ensure high color contrast
  • Provide keyboard accessibility
  • Test with screen readers
  • Consider mobile touch interactions

❌ Avoid This

  • Don't put critical information only in tooltips
  • Avoid excessive animations
  • Don't block important content
  • Avoid poor color contrast
  • Don't ignore mobile users
  • Avoid tooltips on interactive elements that need immediate action

🚀 Performance Tips

CSS Transitions

Use transform and opacity for better performance

Event Delegation

Use event delegation for better JavaScript performance

Reduced Motion

Respect prefers-reduced-motion preference

Efficient Selectors

Use specific CSS selectors for better performance

Ready to Create Amazing Tooltips? 💡

Experiment with our comprehensive tooltip examples and create beautiful, accessible user interfaces that provide helpful context and guidance.

< PreviousNext >