Foundation是成熟的前端CSS框架，内置的tooltip组件可以帮助开发者快速实现元素悬浮弹出提示的功能，无需从零编写复杂的样式和交互逻辑，大幅降低开发成本。该组件支持自定义提示内容、显示位置、触发方式等，适配多种业务场景。
基础使用步骤
1 引入Foundation资源
首先需要保证项目中已经引入了Foundation的核心CSS和JS文件，可以通过CDN或者本地文件的方式引入，以下是基础的引入示例：
<!-- 引入Foundation CSS --> <link rel="stylesheet" href="https://cdn.ipipp.com/foundation/6.7.5/css/foundation.min.css"> <!-- 引入jQuery，Foundation的JS依赖jQuery --> <script src="https://cdn.ipipp.com/jquery/3.6.0/jquery.min.js"></script> <!-- 引入Foundation JS --> <script src="https://cdn.ipipp.com/foundation/6.7.5/js/foundation.min.js"></script> <script> // 初始化Foundation组件 $(document).foundation(); </script>
2 添加提示元素
给需要添加提示的触发元素添加data-tooltip属性，同时设置title属性作为提示内容，再通过aria-describedby关联提示框的ID即可完成基础配置：
<!-- 触发提示的按钮元素 --> <button class="button" data-tooltip title="这是基础提示内容" aria-describedby="tooltip-example"> 悬浮查看提示 </button> <!-- 提示框元素 --> <span data-visible="false" id="tooltip-example" role="tooltip"> 这是基础提示内容 </span>
常用配置参数
Foundation的tooltip组件支持通过data属性自定义提示的显示效果，以下是常用的配置参数说明：
| 参数名 | 作用 | 可选值 |
|---|---|---|
| data-position | 设置提示框显示位置 | top, bottom, left, right |
| data-alignment | 设置提示框对齐方式 | center, left, right |
| data-allow-html | 是否允许提示内容包含HTML | true, false |
| data-hover-delay | 悬浮触发延迟时间，单位毫秒 | 数值，默认200 |
| data-fade-in-duration | 提示框淡入动画时长，单位毫秒 | 数值，默认150 |
自定义提示示例
以下是一个包含自定义位置、对齐方式和HTML内容的提示示例：
<!-- 触发元素：提示显示在右侧，居中对齐，允许HTML内容 --> <span class="label" data-tooltip data-position="right" data-alignment="center" data-allow-html="true" title="<strong>提示标题</strong><br/>这是HTML格式的提示内容" aria-describedby="custom-tooltip" > 自定义提示 </span> <!-- 自定义提示框 --> <div data-visible="false" id="custom-tooltip" role="tooltip" class="tooltip"> <strong>提示标题</strong><br/> 这是HTML格式的提示内容 </div>
注意事项
- 必须执行
$(document).foundation()初始化代码，否则tooltip组件不会生效 - 如果提示内容包含HTML，除了设置
data-allow-html="true"，还需要保证提示框元素内部的内容正确转义 - 提示框的ID需要和触发元素的
aria-describedby属性值完全一致，否则无法正确关联 - 如果需要动态修改提示内容，可以直接修改触发元素的
title属性或者提示框元素的内容，Foundation会自动同步更新
Foundationtooltip弹出提示CSS框架修改时间：2026-06-23 07:45:13