简介
angular2-tippy 是一个 Angular2 的 Tooltip 组件库，借助于 Tippy.js 开发。它提供了一系列的预设主题和自定义主题配置选项，使其能够在 Angular2 应用中方便地添加自定义的提示框。
安装
注意：这里假设你已经安装了 Node.js 和 Angular CLI。
运行以下命令来安装 angular2-tippy：
npm install angular2-tippy --save
后面的 --save 参数是将 angular2-tippy 添加到项目的依赖列表。
使用示例
安装好 angular2-tippy 后，我们来看一下如何使用它。
首先，在你的组件中导入 angular2-tippy：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ------------ - ---- ----------------- ------------ --------- ----------- ------------ ----------------------- ---------- ----------------------- -- ------ ----- ------------ - ------------------- ------------- ------------- - - -
接着，我们可以添加一个简单的提示框：
<button [tippy]="My tooltip content">Hover me</button>
这里，[tippy] 的值就是提示框的内容。我们还可以添加其他属性来添加主题样式：
<button [tippy]="My tooltip content" tippy-theme="light" tippy-arrow="true">Hover me</button>
这会将提示框的样式设置为白色背景色和黑色边框，同时还会显示箭头。
定义自定义主题
你也可以轻松地自定义主题。这里我们将创建一个名为 my-theme 的自定义主题：
$my-theme-background: #3498db;
$my-theme-border: 1px solid #2c3e50;
$my-theme-arrow: true;
@include tippy-theme('my-theme');在你的 HTML 中添加 tippy-theme="my-theme"：
<button [tippy]="My tooltip content" tippy-theme="my-theme">Hover me</button>
这将应用上面的自定义主题。
结尾
本文介绍了如何使用 angular2-tippy，包括安装、基本使用，以及如何创建自定义主题。这些内容旨在为 Angular2 开发者提供关于提示框的快速入门指南。还有其他的配置选项，你可以在 GitHub 项目 上查看完整文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60058bc481e8991b448ed3e3