Foundation Tooltip

Foundation provides tooltips for displaying additional information when users hover over elements.

Basic Tooltip

<!-- Button with tooltip -->
<button class="button primary" data-tooltip title="This is a basic tooltip">
  Hover for tooltip
</button>

<!-- Text with tooltip -->
<span class="text-primary" data-tooltip title="Tooltip on text">
  Hover this text
</span>

<!-- Tooltip with custom class -->
<button class="button" data-tooltip data-tooltip-class="custom-tooltip" title="Custom tooltip">
  Custom Tooltip
</button>

Tooltip Positions

<!-- Top tooltip (default) -->
<button class="button" data-tooltip title="Top tooltip">
  Top
</button>

<!-- Right tooltip -->
<button class="button" data-tooltip data-position="right" title="Right tooltip">
  Right
</button>

<!-- Bottom tooltip -->
<button class="button" data-tooltip data-position="bottom" title="Bottom tooltip">
  Bottom
</button>

<!-- Left tooltip -->
<button class="button" data-tooltip data-position="left" title="Left tooltip">
  Left
</button>

<!-- Top-left tooltip -->
<button class="button" data-tooltip data-position="top-left" title="Top-left tooltip">
  Top Left
</button>

Tooltip with HTML Content

<!-- Tooltip with HTML content -->
<button class="button info" data-tooltip 
        data-allow-html="true"
        title="<strong>Rich Content</strong><br><em>With formatting</em><br>✓ And icons">
  Tooltip with HTML
</button>

<!-- Tooltip with template -->
<span class="has-tip" data-tooltip 
      data-allow-html="true"
      data-click-open="false"
      title="<div class='custom-tooltip-content'><h6>Custom Title</h6><p>Custom content here</p></div>">
  Custom HTML Tooltip
</span>

Tooltip Triggers

<!-- Hover trigger (default) -->
<button class="button warning" data-tooltip title="Hover trigger">
  Hover Trigger
</button>

<!-- Click trigger -->
<button class="button warning" data-tooltip data-click-open="true" title="Click trigger">
  Click Trigger
</button>

<!-- Focus trigger -->
<button class="button warning" data-tooltip data-focus-on="click" title="Focus trigger">
  Focus Trigger
</button>

<!-- Manual trigger -->
<button class="button" data-tooltip data-manual id="manual-tooltip" title="Manual tooltip">
  Manual Trigger
</button>
<script>
  // Show tooltip manually
  $('#manual-tooltip').foundation('show');
</script>

Tooltip Styling

<!-- Custom tooltip class -->
<button class="button primary" data-tooltip 
        data-tooltip-class="custom-tooltip" 
        title="Custom styled tooltip">
  Custom Style
</button>

<!-- Success tooltip -->
<button class="button success" data-tooltip 
        data-tooltip-class="success-tooltip" 
        title="Success tooltip">
  Success Style
</button>

<!-- Warning tooltip -->
<button class="button warning" data-tooltip 
        data-tooltip-class="warning-tooltip" 
        title="Warning tooltip">
  Warning Style
</button>

<!-- CSS for custom tooltips -->
<style>
.custom-tooltip {
  background: #333;
  color: white;
  border-radius: 8px;
  font-size: 14px;
}

.success-tooltip {
  background: #28a745;
  color: white;
}

.warning-tooltip {
  background: #ffc107;
  color: black;
}
</style>

Tooltip on Disabled Elements

<!-- Tooltip on disabled button -->
<span data-tooltip title="This button is disabled">
  <button class="button secondary disabled">
    Disabled Button
  </button>
</span>

<!-- Using has-tip for disabled elements -->
<button class="button primary has-tip" data-tooltip 
        data-disable-hover="false" 
        title="This feature is coming soon!" 
        disabled>
  Coming Soon
</button>

<!-- Tooltip with disabled state message -->
<div class="has-tip" data-tooltip title="This feature is currently unavailable">
  <button class="button" disabled>Unavailable</button>
</div>

Up next: Foundation Customization