« Previous Next »

Comprehensive Guide to Tooltips

What are Tooltips?

Tooltips are small, contextual pop-up boxes that provide additional information about an element when a user hovers over, clicks on, or focuses on it. They enhance usability by offering quick explanations or context without cluttering the design.

Features of Tooltips

  • Contextual Information: Provide concise explanations related to UI elements.
  • Customizable: Easily styled and positioned using CSS.
  • Accessibility: Supports screen readers and keyboard navigation.
  • Interactivity: Can include links or buttons for further actions.

Tooltips Code Examples

    
    <!DOCTYPE html>
      <html lang="en">
        <head>
          <title>Bootstrap Tooltips Examples</title>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
        </head>
        <body>
        
          <div class="section">
              <h2>Why Use Tooltips?</h2>
              <p>
                  Tooltips are effective for enhancing user experience by reducing cognitive load. 
                  They allow users to understand functions and features without navigating away from their current context.
              </p>
          </div>
          
          <div class="section">
              <p>Here's a simple example:</p>
              <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Tooltip on top">
                  Tooltip on top
              </button>
          </div>
          
          <div class="section">
              <h2>Tooltips for Other Elements</h2>
              <p>Tooltips can be used on various HTML elements. Below are some examples:</p>
              <div class="d-flex flex-wrap">
                  <button type="button" class="btn btn-info me-2 mb-2" data-bs-toggle="tooltip" title="Tooltip on left">Tooltip on left</button>
                  <button type="button" class="btn btn-warning me-2 mb-2" data-bs-toggle="tooltip" title="Tooltip on right">Tooltip on right</button>
                  <button type="button" class="btn btn-danger me-2 mb-2" data-bs-toggle="tooltip" title="Tooltip on bottom">Tooltip on bottom</button>
                  <button type="button" class="btn btn-primary me-2 mb-2" data-bs-toggle="tooltip" title="Tooltip on top">Tooltip on top</button>
                  <button type="button" class="btn btn-secondary me-2 mb-2" data-bs-toggle="tooltip" title="Tooltip with HTML content" data-bs-html="true">Tooltip with HTML</button>
              </div>
          </div>
          
          <div class="section">
              <h2>Common Use Cases for Tooltips</h2>
              <ul>
                  <li><strong>Icons:</strong> Provide explanations for icons without cluttering the UI.</li>
                  <li><strong>Form Fields:</strong> Explain the purpose of input fields.</li>
                  <li><strong>Buttons:</strong> Clarify the action of buttons, especially when using icons.</li>
                  <li><strong>Links:</strong> Provide additional context for links.</li>
              </ul>
          </div>
          
          <div class="section">
              <h2>Best Practices for Tooltips</h2>
              <ul>
                  <li>Keep text concise and to the point.</li>
                  <li>Avoid using tooltips for critical information that should always be visible.</li>
                  <li>Ensure tooltips are accessible with keyboard navigation.</li>
                  <li>Test tooltips on various devices to ensure proper behavior.</li>
              </ul>
          </div>
          
          <div class="section">
              <h2>Additional Tooltip Examples</h2>
              <p>Here are more examples showcasing different tooltip placements and styles:</p>
              <div class="d-flex flex-wrap">
                  <button type="button" class="btn btn-light me-2 mb-2" data-bs-toggle="tooltip" title="Light Tooltip" data-bs-placement="top">Light Tooltip</button>
                  <button type="button" class="btn btn-dark me-2 mb-2" data-bs-toggle="tooltip" title="Dark Tooltip" data-bs-placement="bottom">Dark Tooltip</button>
                  <button type="button" class="btn btn-outline-success me-2 mb-2" data-bs-toggle="tooltip" title="Outline Success Tooltip" data-bs-placement="left">Outline Success Tooltip</button>
                  <button type="button" class="btn btn-outline-danger me-2 mb-2" data-bs-toggle="tooltip" title="Outline Danger Tooltip" data-bs-placement="right">Outline Danger Tooltip</button>
              </div>
          </div>
          
          <div class="section">
              <h2>Badges in Tooltips</h2>
              <p>Badges can be integrated within tooltips to provide additional context:</p>
              <button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="Notifications <span class='badge bg-secondary'>3</span>" data-bs-html="true">
                  Notifications
              </button>
          </div>          
        
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
      </body>
    </html>

Output Example

Here's a simple example:

Tooltips for Other Elements

Tooltips can be used on various HTML elements. Below are some examples:

Common Use Cases for Tooltips

  • Icons: Provide explanations for icons without cluttering the UI.
  • Form Fields: Explain the purpose of input fields.
  • Buttons: Clarify the action of buttons, especially when using icons.
  • Links: Provide additional context for links.

Best Practices for Tooltips

  • Keep text concise and to the point.
  • Avoid using tooltips for critical information that should always be visible.
  • Ensure tooltips are accessible with keyboard navigation.
  • Test tooltips on various devices to ensure proper behavior.

Additional Tooltip Examples

Here are more examples showcasing different tooltip placements and styles:

Badges in Tooltips

Badges can be integrated within tooltips to provide additional context:

« Previous Next »