popper-next

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;

所有属性

所有事件

umd版本

https://unpkg.com/popper-next