popper-next

是一款轻量的 Tooltip 插件

vue、react安装使用 推荐yarn

yarn add popper-next
或者
cnpm install popper-next -S

在html页面中如何使用

<script src="https://unpkg.com/popper-next"></script>
<script>
const btn = document.querySelector('.btn');
const tip = document.querySelector('.tip');
const Popper = createPopper(btn, tip);
</script>

<div class="btn">按钮</div>
<div class="tip">提示信息</div>

在VUE3 + ts中如何使用

<script setup lang="ts">
import { ref } from 'vue'
import createPopper, { PopperConfig } from 'popper-next'

const btn = ref<HTMLElement>();
const tip = ref<HTMLElement>();
const Popper: PopperConfig = createPopper(btn.value as HTMLElement, tip.value as HTMLElement);
</script>

<div ref="btn">按钮</div>
<div ref="tip">提示信息</div>

属性配置

全局配置属性

例如：所有tooltip位置默认初始化右边

import createPopper from 'popper-next'

createPopper.defaults.placement = 'right';

单个配置属性

例如：以下这个tooltip默认没有动画效果

import createPopper from 'popper-next'

const Popper = createPopper(referene, popper, {
  placement: 'top'
});
Popper.defaults.animate = false;

所有属性

| 属性 | 说明 | 类型 | 可选值 | 默认值 | 必填 | | ---- | ---- | ---- | ---- | ---- | ---- | | placement | 出现的位置 | string | top/bottom/left/right | bottom | 否 | | trigger | 触发行为 | string | hover/click/contextmenu | hover | 否 | | offset | 出现位置的偏移量 | number | — | 10 | 否 | | animate | 添加动画 | boolean | true / false | true | 否 | | speed | 动画速度，单位毫秒 | number | — | 400 | 否 | | zIndex | 设置元素的堆叠顺序 | number | — | 2000 | 否 |

所有事件

| 事件 | 说明 | 类型 | 返回值 | ---- | ---- | ---- | ---- | | show | 显示tooltip | function | void | | hide | 隐藏tooltip | function | void |

umd版本

https://unpkg.com/popper-next