A lightweight tooltip plug-in library

Overview

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
offset 出现位置的偏移量 number 10
animate 添加动画 boolean true / false true
speed 动画速度,单位毫秒 number 400
zIndex 设置元素的堆叠顺序 number 2000

umd版本

https://unpkg.com/popper-next

You might also like...

Simple pure CSS ToolTip

Simple pure CSS ToolTip

PureCSSToolTip Simple pure CSS ToolTip purecsstooltip.css is used to the added tooltip for a web app, web page without javascript. This full of CSS co

Sep 19, 2022

EggyJS is a Javascript micro Library for simple, lightweight toast popups focused on being dependency-less, lightweight, quick and efficient.

EggyJS EggyJS is a Javascript micro Library for simple, lightweight toast popups. The goal of this library was to create something that meets the foll

Jan 8, 2023

A customizable lightweight Alert Library with Material UI and awesome features.

A customizable lightweight Alert Library with Material UI and awesome features.

SoloAlert A customizable lightweight Alert Library with Material UI and awesome features. view soloalert on npm : https://www.npmjs.com/soloalert Inst

Nov 30, 2022

Websheetjs - Lightweight JS library to render website sections with data from Google Spreadsheets

websheet.js Render website sections with lazy-loaded data from Google Spreadsheets It's lightweight, fast, free and open-source ! See how it works, fu

Oct 4, 2022

Yunisdev-table2csv - Lightweight library to convert HTML table to CSV file

Installation Add following HTML before body end: script src="https://yunisdev.github.io/table2csv/table2csv.min.js"/script !-- or -- script src

Oct 19, 2020

Lightweight library to copy PNG and JPG images to clipboard

Copy Image Clipboard Created with ❤️ by Luan Eduardo da Costa | Follow me on Linkedin 📃 About This library allows you to copy JPG and PNG images (onl

Nov 29, 2022

Seamless and lightweight parallax scrolling library implemented in pure JavaScript utilizing Hardware acceleration for extra performance.

parallax-vanilla.js Seamless and lightweight parallax scrolling library implemented in pure JavaScript utilizing Hardware acceleration for extra perfo

Dec 16, 2022

A lightweight, fully-featured, modular, typescript-compatible javascript library for Paymongo.

A lightweight, fully-featured, modular, typescript-compatible javascript library for Paymongo.

paymongo.js A lightweight, fully-featured, modular, typescript-compatible javascript library for PayMongo. Installation npm install paymongo.js # or y

Nov 23, 2022

curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.

curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.

What is it ? Shaders are the new front-end web developpment big thing, with the ability to create very powerful 3D interactions and animations. A lot

Jan 1, 2023
Owner
east-wzd
east-wzd
Plug-in for Obsidian.md which will create Notes from JSON files

Import JSON This plug-in provides you with the tools to import your favourite JSON tables. A magnifying-glass icon will appear in the left margin when

Martin 33 Dec 31, 2022
Write and read comments on every page with a simple plug-in for your browser

Licom - comments on every webpage Licom is a simple plugin for your browser that adds the feature to leave comments on every page, even if it doesn't

Sebastian Korotkiewicz 45 Aug 4, 2022
A Hackable Markdown Note Application for Programmers. Version control, AI completion, mind map, documents encryption, code snippet running, integrated terminal, chart embedding, HTML applets, plug-in, and macro replacement.

Yank Note A hackable markdown note application for programmers Download | Try it Online >>> Not ecommended English | 中文说明 [toc]{level: [2]} Highlights

洋子 4.3k Dec 31, 2022
Robust, plug & play generator for Bootstrap toasts.

Bootstrap Toaster Robust, plug & play generator for Bootstrap toasts. Supports Bootstrap 4 and Bootstrap 5. Demo A demo page is available at bootstrap

Peyton Gasink 22 Dec 21, 2022
A jQuery plug-in to notify you of CSS, Attribute or Property changes in an element

selectWatch.js jQuery plug-in gives an opportunity to monitor changes of DOM element's CSS styles, attributes, properties, input element or select ele

Fatih Kazancı 3 Oct 28, 2022
Plug-and-play, faster-than-native promise/callback event emitter

kNow Blazing-fast callback/promise-based events with a tiny footprint What is this? With kNow (pronounced "now"—the k's silent), JavaScript event mana

Elijah Bodden 25 Sep 11, 2022
A jQuery Plug-in to select the time with a clock inspired by the Android time picker.

Clock Timepicker Plugin for jQuery See a demo here A free jQuery Plug-in to select the time with a clock inspired by the Android time picker. This plu

Andy 51 Dec 22, 2022
A basic Svelte tooltip directive.

SVooltip A basic Svelte tooltip directive. Powered by Floating UI. Usage <script> import { tooltip } from 'svooltip'; import 'svooltip/svooltip.css'

Ian 28 Nov 26, 2022
A simple step by step tooltip helper for any site

Tooltip Sequence A minimalistic set of tooltips on your app. What it does So suppose you create a Web Application and you want to take your users or a

Sooraj Sivadasan Nair 299 Dec 21, 2022
Tooltip using only CSS and very low build size.

css-only-tooltip A very lightweight tooltip utitlity library, made using only CSS with dynamic light and dark themes. Insatallation Using npm $ npm in

Rajiv 4 Dec 11, 2022