HTML5 搜索框提示可通过四种方式实现：一、用 title 属性最简；二、用 data-tooltip 加 CSS 自定义样式；三、用 JavaScript 动态控制显示隐藏；四、用 aria-label 和 aria-describedby 增强无障碍支持。
如果您希望在 HTML5 搜索框中添加提示信息，可以通过原生 title 属性或自定义 tooltip 方式实现。以下是两种不同机制的具体操作步骤：
一、使用 HTML5 原生 title 属性添加提示
title 属性是 HTML 元素的内置全局属性，浏览器 默认以悬浮气泡形式显示其值，无需额外 CSS 或 JavaScript，兼容性好且实现最简。
1、在 标签中添加 title 属性，并设置提示文本内容。
2、确保 input 元素的 type 属性为 ”search”，例如：。
立即学习 “ 前端免费学习笔记（深入）”；
3、将该代码嵌入 HTML 文档的 body 内任意位置，保存后用鼠标悬停于搜索框上即可触发提示。
二、使用 data-tooltip 属性配合 CSS 实现自定义 tooltip
通过自定义 data 属性与 CSS伪元素（::before、::after）结合，可脱离浏览器默认样式，控制 tooltip 的位置、颜色、边框及动画效果。
1、为搜索框添加自定义属性 data-tooltip，例如：。
2、在 style 标签或外部 CSS 文件中，编写如下规则：input[data-tooltip] {position: relative;}。
3、添加 tooltip 主体样式：使用：:after 伪元素生成提示框，设置 content: attr(data-tooltip)，并配置 background、color、padding、border-radius 等视觉属性。
4、设置 tooltip 定位：使用 position: absolute，配合 top、left、transform 等属性将其固定在搜索框上方居中位置。
三、使用 JavaScript 动态绑定 tooltip 事件
当需根据用户交互状态（如聚焦、失焦）动态显示 / 隐藏提示，或支持 HTML 内容渲染时，JavaScript 方案更灵活可控。
1、获取搜索框 DOM 元素，例如：const searchInput = document.querySelector(‘input[type=”search”]’);
2、创建 tooltip 容器元素，设置 class 为 ”custom-tooltip”，并插入到 body 末尾。
3、监听 input 元素的 focus 事件，在触发时将 data-tooltip 值写入 tooltip 容器，并设为 display: block。
4、监听 blur 事件，在失去焦点时将 tooltip 容器设为 display: none。
5、为 tooltip 容器添加 CSS 样式，包括 max-width、white-space: nowrap、overflow: hidden、text-overflow: ellipsis 等，确保长文本可读。
四、使用 aria-label 与 aria-describedby 增强可访问性
对屏幕阅读器用户而言，title 属性不可靠，而 WAI-ARIA 属性能提供语义化提示支持，提升无障碍体验。
1、为搜索框添加 aria-label 属性，例如：。
2、在搜索框附近添加一个隐藏的描述元素：
。
3、在 input 标签中加入 aria-describedby=”search-desc”，建立关联关系。
4、通过 CSS 设置。sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } 隐藏该描述但保留在辅助技术中。
