介绍
ns-popover 是一个基于原生 JavaScript 的轻量级 popover 插件，可以实现类似于鼠标悬停在网页元素上时弹出提示框的效果。它可以自适应定位以防止越界，并提供了丰富的配置选项和回调函数。
在本文中，我们将介绍如何使用 ns-popover 来创建弹出框，并提供示例代码。
安装
使用 npm 安装 ns-popover：
--- ------- ---------- ------
基本用法
在 HTML 文件中引入 ns-popover.js 和 ns-popover.css：
--------- -----
------
------
----- ----------------
----------------- ------------
----- ---------------- -----------------------------------------------------
-------
------
------- -------------------- ------------
------- ------------------------------------------------------------
--------
--- -------- - -------------------------------------
--- ------------------- -
-------- ------- -------
---
---------
-------
-------在 JavaScript 中，创建一个新的 NSPopover 实例需要传入两个参数：触发元素和配置对象。在上面的示例中，我们选择了按钮作为触发元素，将其作为第一个参数传递，并在配置对象中设置内容为 "Hello, World!"。
配置选项
ns-popover 提供了许多配置选项，允许您完全自定义弹出框的外观和行为。下面是一些常用的选项：
content：要在弹出框中显示的内容。placement：弹出框相对于触发元素的位置，可以是 "top"、"bottom"、"left" 或 "right"。trigger：触发弹出框的事件类型，可以是 "hover"、"click" 或 "focus"。offset：弹出框与触发元素之间的偏移量，以像素为单位。arrow：是否显示箭头。
例如，在下面的示例中，我们将配置对象传递给 NSPopover 构造函数，并设置了 content、placement 和 offset 选项：
--- -------- - -------------------------------------
--- ------------------- -
-------- ------- --------
---------- ---------
------- --
---回调函数
ns-popover 还提供了许多回调函数，允许您在不同的阶段对弹出框进行自定义操作。以下是一些常用的回调函数：
onShow：当弹出框显示时调用。onShown：当弹出框完全显示时调用。onHide：当弹出框隐藏时调用。onHidden：当弹出框完全隐藏时调用。
例如，在下面的示例中，我们将回调函数传递给 NSPopover 构造函数，并在 onShow 回调函数中修改弹出框的样式：
--- -------- - -------------------------------------
--- ------------------- -
-------- ------- --------
------- ---------- -
---------------------------------- - -------
-
---示例代码
下面是一个完整的示例代码，它演示了如何使用 ns-popover 来创建自定义弹出框：
--------- -----
------
------
----- ----------------
----------------- ------------
----- ---------------- -----------------------------------------------------
-------
-- ----- --
----------- -
-------- -----
----------------- -----
-------------- ----
-----------
----------------------------------------------------------- ----------
---------------------------------------------------------------------------------------