Foundation 提示框（Tooltip）详解（超级完整版，一次讲透）
我们继续你的 Foundation 系列，今天把 提示框（Tooltip）讲得明明白白！Foundation 6+ 的 Tooltip 是一个轻量级悬停提示组件，用于在鼠标悬停（或触摸点击）时显示额外说明、定义或提示信息。支持多方向定位、HTML 内容、触摸设备适配、无障碍访问，常用于图标解释、表单帮助、术语定义等。
1. 基本结构（最简单写法）
<span class="has-tip" data-tooltip tabindex="1" title="这是一个提示框！">
悬停我试试
</span>关键属性：
class="has-tip"：旧版常用，新版推荐直接用data-tooltipdata-tooltip：触发 Tooltip 插件tabindex="1"：让元素可聚焦（键盘/触摸必备）title：提示内容（支持纯文本）
2. 方向定位（最常用）
添加方向类到触发元素：
<span data-tooltip class="top" tabindex="1" title="在上方显示">上方 Tooltip</span>
<span data-tooltip class="bottom" tabindex="1" title="在下方显示">下方 Tooltip</span>
<span data-tooltip class="left" tabindex="1" title="在左侧显示">左侧 Tooltip</span>
<span data-tooltip class="right" tabindex="1" title="在右侧显示">右侧 Tooltip</span>默认是下方（bottom）。
3. 支持 HTML 内容 + 点击触发
<span data-tooltip data-allow-html="true" tabindex="1" title="<strong>粗体</strong> 和 <em>斜体</em>">
支持 HTML 的 Tooltip
</span>
<!-- 点击触发（适合移动端） -->
<span data-tooltip data-click-open="true" tabindex="1" title="点击我显示提示">
点击触发 Tooltip
</span>4. 今天直接给你抄的完整代码（复制就能跑）
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation.min.css">
</head>
<body>
<h3>Foundation Tooltip 提示框全家福</h3>
<p>
这是 <span data-tooltip tabindex="1" title="默认下方提示">默认 Tooltip</span>，
这是 <span data-tooltip class="top" tabindex="1" title="在上方显示">上方</span>，
这是 <span data-tooltip class="right" tabindex="1" title="在右侧显示">右侧</span>，
这是 <span data-tooltip data-allow-html="true" tabindex="1" title="<strong>粗体提示</strong><br>支持多行">HTML 支持</span>。
</p>
<p>移动端友好： <span data-tooltip data-click-open="true" tabindex="1" title="点击我才显示（适合手机）">点击触发 Tooltip</span></p>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/js/foundation.min.js"></script>
<script>$(document).foundation();</script>
</body>
</html>下面给你看真实效果（官方风格和项目中最标准的 Foundation Tooltip 示例）：
官方文档（最新版）：https://get.foundation/sites/docs/tooltip.html
你现在想干嘛？
→ 明天终于讲 Foundation 表格（Table）？
→ 帮我做一个带图标的帮助 Tooltip（比如 ? 图标）？
→ 给我一个表单输入框旁边的提示框代码？
直接回复下一句：
“明天讲 table”
“帮我做帮助图标 Tooltip”
“给我表单提示框”
我立刻给你写好！
