Foundation Tooltip
Foundation Tooltips are used to display additional information when users hover over elements. This chapter will introduce various uses of tooltips.
Basic Tooltip
html
<span data-tooltip tabindex="1" title="This is tooltip content">Hover to see tooltip</span>Tooltip Position
html
<button class="button" data-tooltip data-position="top" tabindex="1" title="Top tooltip">Top</button>
<button class="button" data-tooltip data-position="bottom" tabindex="1" title="Bottom tooltip">Bottom</button>
<button class="button" data-tooltip data-position="left" tabindex="1" title="Left tooltip">Left</button>
<button class="button" data-tooltip data-position="right" tabindex="1" title="Right tooltip">Right</button>Tooltip Alignment
html
<button class="button" data-tooltip data-position="top" data-alignment="left" tabindex="1" title="Left aligned">Left</button>
<button class="button" data-tooltip data-position="top" data-alignment="center" tabindex="1" title="Centered">Center</button>
<button class="button" data-tooltip data-position="top" data-alignment="right" tabindex="1" title="Right aligned">Right</button>Configuration Options
html
<span data-tooltip
data-position="top"
data-alignment="center"
data-hover-delay="200"
data-fade-in-duration="150"
data-fade-out-duration="150"
data-click-open="false"
tabindex="1"
title="Tooltip content">
Hover to see
</span>| Option | Description | Default |
|---|---|---|
data-position | Position (top/bottom/left/right) | bottom |
data-alignment | Alignment (left/center/right) | center |
data-hover-delay | Hover delay (ms) | 200 |
data-click-open | Click to open | false |
Custom Styles
html
<style>
.tooltip.primary { background: #1779ba; }
.tooltip.success { background: #3adb76; }
.tooltip.warning { background: #ffae00; color: #333; }
.tooltip.alert { background: #cc4b37; }
</style>
<span data-tooltip class="has-tip" data-template-classes="tooltip primary" tabindex="1" title="Primary tooltip">Primary</span>Complete Example
html
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation Tooltip Example</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
<style>
.demo-section { margin-bottom: 40px; padding: 30px; background: #f8f8f8; }
.demo-section h3 { margin-bottom: 20px; }
.has-tip { border-bottom: 1px dotted #333; cursor: help; }
</style>
</head>
<body>
<div class="grid-container">
<h1>Foundation Tooltip Showcase</h1>
<div class="demo-section">
<h3>Basic Tooltip</h3>
<p>This is a paragraph with a
<span class="has-tip" data-tooltip tabindex="1" title="This is tooltip content, which can include more detailed information.">term</span>
that needs explanation.
</p>
</div>
<div class="demo-section">
<h3>Tooltip Positions</h3>
<button class="button" data-tooltip data-position="top" tabindex="1" title="This is a top tooltip">Top</button>
<button class="button" data-tooltip data-position="bottom" tabindex="1" title="This is a bottom tooltip">Bottom</button>
<button class="button" data-tooltip data-position="left" tabindex="1" title="This is a left tooltip">Left</button>
<button class="button" data-tooltip data-position="right" tabindex="1" title="This is a right tooltip">Right</button>
</div>
<div class="demo-section">
<h3>Tooltips on Icons</h3>
<button class="button" data-tooltip tabindex="1" title="Edit this item">
<i class="fi-pencil"></i>
</button>
<button class="button" data-tooltip tabindex="1" title="Delete this item">
<i class="fi-trash"></i>
</button>
<button class="button" data-tooltip tabindex="1" title="View details">
<i class="fi-eye"></i>
</button>
</div>
<div class="demo-section">
<h3>Form Hints</h3>
<label>Password
<span class="has-tip" data-tooltip tabindex="1" title="Password must contain at least 8 characters, including uppercase and lowercase letters and numbers">
<i class="fi-info"></i>
</span>
</label>
<input type="password" placeholder="Enter password">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
<script>$(document).foundation();</script>
</body>
</html>Summary
In this chapter, we learned about tooltip positions, alignment, and custom styles.
Next chapter, we will learn Foundation Modal.