Foundation的Tooltip组件通过HTML属性实现免JS提示,需引入CSS和JS文件并初始化。使用data-tooltip和title属性添加提示,支持data-position和data-alignment设置位置与对齐,配合aria-haspopup="true"和类名确保功能正常。

Foundation 的 Tooltip 组件可以快速为页面元素添加弹出提示,无需手动编写 JavaScript。只需要在 HTML 中设置特定的属性,就能实现鼠标悬停时显示提示内容的效果。
启用 Tooltip 功能
要使用 Foundation 的 Tooltip,需确保已正确引入 Foundation 的 CSS 和 JS 文件,并初始化 Tooltip 插件。
说明:示例代码:
使用 data-tooltip 添加提示
只需在任意 HTML 元素上添加 data-tooltip 属性,并配合 title 属性定义提示文字即可。
立即学习“前端免费学习笔记(深入)”;
- title:显示的提示文本
- data-tooltip:激活 Foundation 提示功能
- 可选 data-position 设置方向(top、bottom、left、right)
- 可选 data-alignment 控制对齐方式(left、right、center)
示例:
悬停显示提示
自定义样式与位置
Tooltip 支持多种位置和外观配置,适合不同布局需求。
- 方向设置:
data-position="bottom"让提示出现在下方 - 对齐控制:
data-alignment="right"靠右对齐提示框 - 添加类名 no-underline 可去除下划线样式
例如,底部右侧对齐提示:
基本上就这些。只要结构正确,Foundation 会自动处理显示隐藏和事件绑定,轻松实现干净美观的提示效果。不复杂但容易忽略细节,比如必须包含 aria-haspopup="true" 和正确的类名。










