前言
在前端开发中，很多场景下需要实现浮动提示、气泡提示等功能。这时候，@atlassian/tipsy 这个工具包就显得非常实用。
本篇文章将详细介绍 @atlassian/tipsy 的使用方法，深入剖析其实现原理，帮助读者理解使用该包的指导意义。
安装
通过 npm 包管理工具进行安装：
npm install @atlassian/tipsy --save
使用方法
原始使用方法
HTML 结构
在需要实现浮动提示的 HTML 中，需要为需要提示的元素定义一个特定的类名，并添加相关的属性，例如：
<button class="btn" title="提示信息">按钮</button>
JavaScript
使用 Tipsy 配置浮动提示信息：
-- -------------------- ---- ------- ------ ----- ---- ------------------- ----- --- - ------------------------------- ----- ----- - --- ---------- - -------- ------------------------- --- ----------------------------- ---------------------------------- -- -- - ------------- --- ---------------------------------- -- -- - ------------- ---
在该示例中，我们首先获取名为 .btn 的按钮元素，并使用 Tipsy 构造函数创建了一个浮动提示对象 tipsy。这里 content 属性表示提示的内容，使用 getAttribute 获取按钮的 title 作为其具体的提示信息。
接着移除按钮的 title 属性，以避免浏览器默认的提示出现。
最后，通过 mouseenter 事件监听器实现提示框的显示，mouseleave 事件监听器实现提示框的隐藏。
效果
当我们鼠标移动到按钮上时，Tipsy 就会展示我们事先配置好的提示信息，友好地提示了按钮的功能。
进阶使用方法
在真实项目中，通常需要对提示框的状态进行自定义，例如：控制提示框的位置、自定义样式等。Tipsy 同样可以支持这些复杂的需求。
HTML 结构
和普通方法一样。
JavaScript
使用 Tipsy 构造函数配置浮动提示对象时，可以传入更多自定义参数，例如：
-- -------------------- ---- ------- ------ ----- ---- ------------------- ----- --- - ------------------------------- ----- ----- - --- ---------- - -------- -------------------------- ------ ----- -------- ---- ---------- ---------- --- ----------------------------- ---------------------------------- -- -- - ------------- --- ---------------------------------- -- -- - ------------- ---
在该示例中，我们除了继续先配置 content 属性获取按钮的 title 作为其提示信息外，我们还添加了一些参数：
arrow：表示是否显示提示框的箭头。gravity：控制提示框出现的位置。className：自定义提示框的样式。
在该示例中，我们设置箭头、提示框的位置（在按钮下方）、以及自定义样式名称。
这些自定义参数的具体含义可以参考文档。
效果
当我们鼠标移动到按钮上时，Tipsy 就会展示我们自己设置的自定义提示框，以更好地满足我们的需求。
总结
本篇文章通过介绍 @atlassian/tipsy 的安装、配置及使用方法，帮助读者学习并掌握了一个非常实用的前端开发工具包。
在真实项目中，Tipsy 的使用方法和配置参数是非常灵活的，读者可以根据自己的实际需求进行使用和延伸，实现更加丰富和优秀的前端交互效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/100368