npm install tooltips 提示插件：popper.js

Popper.js 是一个扩展性较好的 tooltips 提示类 JS 插件，不需要依赖 jQuery 库，大小仅为 3.5KB 左右，使用与配置相当简单，若你的 Web 网站有这个需要，可以尝试使用这个该特效插件。

JS 插件名称：popper.js
下载地址： https://popper.js.org/

因为公众号不支持外部链接，请复制地址到浏览器打开下载。

下面我们来看看这个 JS 提示类代码插件的用法与功能介绍。

一、自定义提示方向

可随意设置上下左右显示，简单一行代码，就能设置

代码，把 left 修改为对应的方向文字即可。

var popper = new Popper(referenceElement, onPopper, {placement: ‘left’
});

二、滚动容器显示

这个不好描述，大家还是看 DEMO 图吧：

代码加入 boundariesElement: container 即可：

var popper = new Popper(referenceElement, onLeftPopper, {placement: ‘left’,boundariesElement: container
});

三、支持拖拽移动

拖拽元素时，Tooltips 提示内容会自动粘附于被拖拽的容器。

代码：

var popper = new Popper(referenceElement, onLeftPopper, {placement: ‘left’,flipBehavior: [‘left’, ‘bottom’, ‘top’],boundariesElement: container
});

四、超出浏览器边界，自动切的方向

有时间因为内容置于网页边缘，导致 Tooltips 的提示不能完整显示，而 Popper.js 就解决了这个问题。

代码：

var popper = new Popper(referenceElement, onBottomPopper, {placement: ‘bottom’
});

npm install tooltips 提示插件：popper.js相关推荐

一款优雅的消息提示插件Message.js
Message.js 插件描述: 一款优雅的原生JS页面消息提示插件,兼容性良好,无任何依赖. Git: Gitee | GitHub 插件预览:Message.js 声明: 此插件非笔者原创,笔者只 ...
前端开发：项目运行npm install 提示XXX packages are looking for funding run `npm fund` for details的解决方法
分享一个去年遇到的问题,作为总结性的来分享一下,方便有需要的人查看使用,具体操作是这样的:更新了依赖,更新完之后,运行npm: 命令行:npm install 然后提示如下信息: 35 package ...
vue调用cordova 插件_Vue.js 使用cordova camera插件调取相机
本文给出在vue.js里如何使用cordova的插件完成调取相机及图库,并完成图片上传的操作. 具体的操作步骤如下第一步:在cordova项目下安装cordova-plugin-camera插件 c ...
grumble.js-非常酷的气泡提示插件
另外推荐一个非常酷的气泡提示插件--grumble.js,首先看下效果: 这个插件样式非常漂亮,并且支持多种事件,支持手动关闭. 但是该插件在IE6.IE7下表现不是那么良好,其中,在IE6下得表现如 ...
芋道admin-ui启动失败提示npm install --save highlight.js/lib/highlight highlight.js/styles/github-gist.css
npm install 没有问题,但是npm run dev启动失败后要求npm install --save highlight.js/lib/highlight highlight.js/styl ...
Vue中引入swiper插件报错：To install it, you can run: npm install --save swiper/css/swiper.css
Vue中引入swiper插件报错:To install it, you can run: npm install --save swiper/css/swiper.css 今天在写项目的时候用到了Sw ...
npm ERR! code ERR_STREAM_WRITE_AFTER_END npm install 报错实力踩坑npm，自从用了npm之后项目构建和插件管理确实方便了很多，但也是被坑的不要不要的
实力踩坑npm,自从用了npm之后项目构建和插件管理确实方便了很多,但也是被坑的不要不要的.由于平时只是用用,并没有深入了解node的npm,所以遇到问题都比较棘手,能够查到的资料也不多.阐述以下我遇 ...
html js 循环提示框,纯js超酷消息提示框插件notice.js
notice.js是一款纯js超酷消息提示框插件.notice.js为纯js编写,没有任何依赖文件.通过它可以在页面上制作出漂亮的toast消息通知框效果.该js消息提示框插件的特点还有: 支持4中情 ...
npm install 提示权限不足 Error: EPERM: operation not permitted, unlink XXX
问题描述使用npm install出现 npm install 提示权限不足 Error: EPERM: operation not permitted, unlink XXX提示原因这里原因有 ...