用途:sgds-tooltip 是 SGDS Web Component 中的提示组件,包裹目标元素后,在悬停、聚焦或点击时显示一小段文本弹窗,用于展示上下文帮助信息。
主要能力:通过 content 属性设置提示文本,仅支持纯文本,不渲染 HTML。placement 控制显示位置,可选 top(默认)、bottom、left、right;trigger 控制触发方式,可选 hover focus(默认,鼠标悬停加键盘 Tab)、hover(仅鼠标)、focus(仅键盘或程序化聚焦)、click(点击切换)。当提示会超出视口时,位置会自动翻转。
使用方式:将目标元素放入默认插槽。若目标元素本身不可键盘聚焦(如 SVG、div、span),需添加 tabindex="0" 以便键盘用户触发。组件提供 sgds-show、sgds-after-show、sgds-hide、sgds-after-hide 事件,以及 show()、hide()、toggle() 三个公开方法用于编程式控制。
适用场景:表单字段说明、图标提示、必填标记、复制成功等二元状态确认。
限制:内容只能是纯文本;不暴露自定义属性与 CSS Part,无法通过 CSS 修改样式;安装与框架集成需参考 sgds-components-setup;click 触发建议少用,更适合“已复制”这类确认提示。