Foundation 提示框
Foundation 提示框（Tooltip）用于在用户悬停时显示额外信息。本章将介绍提示框的各种用法。
基本提示框
html
<span data-tooltip tabindex="1" title="这是提示信息">悬停查看提示</span>提示框位置
html
<button class="button" data-tooltip data-position="top" tabindex="1" title="顶部提示">顶部</button>
<button class="button" data-tooltip data-position="bottom" tabindex="1" title="底部提示">底部</button>
<button class="button" data-tooltip data-position="left" tabindex="1" title="左侧提示">左侧</button>
<button class="button" data-tooltip data-position="right" tabindex="1" title="右侧提示">右侧</button>提示框对齐
html
<button class="button" data-tooltip data-position="top" data-alignment="left" tabindex="1" title="左对齐">左对齐</button>
<button class="button" data-tooltip data-position="top" data-alignment="center" tabindex="1" title="居中">居中</button>
<button class="button" data-tooltip data-position="top" data-alignment="right" tabindex="1" title="右对齐">右对齐</button>配置选项
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="提示信息">
悬停查看
</span>| 选项 | 说明 | 默认值 |
|---|---|---|
data-position | 位置 (top/bottom/left/right) | bottom |
data-alignment | 对齐 (left/center/right) | center |
data-hover-delay | 悬停延迟(ms) | 200 |
data-click-open | 点击触发 | false |
自定义样式
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</span>完整示例
html
<!DOCTYPE html>
<html class="no-js" lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Foundation 提示框示例</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 提示框展示</h1>
<div class="demo-section">
<h3>基本提示框</h3>
<p>这是一段文字，其中有一个
<span class="has-tip" data-tooltip tabindex="1" title="这是提示框的内容，可以包含更多详细信息。">术语</span>
需要解释。
</p>
</div>
<div class="demo-section">
<h3>提示框位置</h3>
<button class="button" data-tooltip data-position="top" tabindex="1" title="这是顶部提示">顶部</button>
<button class="button" data-tooltip data-position="bottom" tabindex="1" title="这是底部提示">底部</button>
<button class="button" data-tooltip data-position="left" tabindex="1" title="这是左侧提示">左侧</button>
<button class="button" data-tooltip data-position="right" tabindex="1" title="这是右侧提示">右侧</button>
</div>
<div class="demo-section">
<h3>带提示的图标</h3>
<button class="button" data-tooltip tabindex="1" title="编辑此项">
<i class="fi-pencil"></i>
</button>
<button class="button" data-tooltip tabindex="1" title="删除此项">
<i class="fi-trash"></i>
</button>
<button class="button" data-tooltip tabindex="1" title="查看详情">
<i class="fi-eye"></i>
</button>
</div>
<div class="demo-section">
<h3>表单提示</h3>
<label>密码
<span class="has-tip" data-tooltip tabindex="1" title="密码必须包含至少8个字符，包括大小写字母和数字">
<i class="fi-info"></i>
</span>
</label>
<input type="password" placeholder="请输入密码">
</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>总结
本章我们学习了提示框的位置、对齐和自定义样式。
下一章，我们将学习 Foundation 模态框。