前言
前端开发中常常会需要提示用户某些信息或者操作，一个常用的方式是使用工具提示（Tooltip）。而本文所介绍的 npm 包 @cspanring/ember-tooltips，便是一款可以方便地在 Ember.js 应用中添加工具提示的工具包。
安装
通过 npm 安装 @cspanring/ember-tooltips：
npm install --save @cspanring/ember-tooltips
然后在你的 Ember.js 应用中引入并安装：
ember install ember-cli-popper
使用
简单用法
在 Ember.js 应用中使用 @cspanring/ember-tooltips 可以通过使用 tooltips 助手：
<button {{on 'mouseenter' this.showTooltip}} {{on 'mouseleave' this.hideTooltip}}>
Show Tooltip
{{#tooltip-text}}
This is a tooltip.
{{/tooltip-text}}
</button>上述代码中，<button> 标签用于触发工具提示的显示和隐藏，当鼠标移入按钮时显示工具提示，鼠标移出时隐藏工具提示。
<tooltip-text> 标签内的文本便是我们要显示的工具提示内容。同时，{{on 'mouseenter' this.showTooltip}} 和 {{on 'mouseleave' this.hideTooltip}} 则用于控制工具提示的显示和隐藏。
参数配置
@cspanring/ember-tooltips 还提供了丰富的参数配置方式。
-- -------------------- ---- -------
------- ---- ------------ ------------------ ---- ------------ -------------------
---- -------
---------------
--------------
---------
------------
------------- -- - ---------
-------------- ---- ------------- ------
-------------- ---- ------------- -------
---- -- - --------
-----------------
---------在 <tooltip-text> 标签内添加参数即可对工具提示进行配置。常见的参数如下：
animation控制工具提示是否需要动画，默认为true；delay控制工具提示显示延时（毫秒）；duration控制工具提示动画时间（毫秒）；content控制工具提示显示内容；onShow和onHide分别控制工具提示显示和隐藏时的回调函数。
示例代码
为方便学习和理解，以下代码提供了一个完整的示例以展示如何使用 @cspanring/ember-tooltips：
-- -------------------- ---- -------
------- ---- ------------ ------------------ ---- ------------ -------------------
---- -------
---------------
--------------
---------
------------
------------- -- - ---------
-------------- ---- ------------- ------
-------------- ---- ------------- -------
---- -- - --------
-----------------
---------
----- --------------
------------ -------------
--------
------------ ------------
--------- -------------------- ---- -------
------ --------- ---- ---------------------
------ - ------ - ---- ----------------
------ ------- ----- ------------- ------- --------- -
------- - ------
-------
------------- -
------------ - -----
-
-------
------------- -
------------ - ------
-
-结语
@cspanring/ember-tooltips 是一款方便地为 Ember.js 应用添加工具提示的工具包，通过本文的学习，相信您已经了解了如何安装和使用此工具包，也希望在今后的开发中能够在合适的场景中使用工具提示来提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056bdb81e8991b448e5859