KABBOUCHI / Vue Tippy
Licence: mit
VueJS Tooltip powered by Tippy.js
Stars: ✭ 395
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Tippy
react-popover
Customizable positioning for tooltips, menus, and any other DOM elements inside of a container
Stars: ✭ 13 (-96.71%)
Mutual labels: tooltip
Rn Tourguide
🚩Make an interactive step by step tour guide for your react-native app (a rewrite of react-native-copilot)
Stars: ✭ 269 (-31.9%)
Mutual labels: tooltip
react-hotkey-tooltip
A global Hotkey provider with built in tooltip for React
Stars: ✭ 34 (-91.39%)
Mutual labels: tooltip
React Native Walkthrough Tooltip
An inline wrapper for calling out React Native components via tooltip
Stars: ✭ 299 (-24.3%)
Mutual labels: tooltip
Bgatransformerstip Android
Android 通用 PopupWindow,再也不用找 UI 小姐姐切 .9 图片了,大致能为你节省 30 分钟的开发时间
Stars: ✭ 372 (-5.82%)
Mutual labels: tooltip
Easy Toggle State
A tiny JavaScript library to easily toggle the state of any HTML element in any contexts, and create UI components in no time.
Stars: ✭ 261 (-33.92%)
Mutual labels: tooltip
SmartVHDL
SublimeText Plugin for VHDL (highlight, autocompletion, navigation, ...)
Stars: ✭ 12 (-96.96%)
Mutual labels: tooltip
jsPanel3
A jQuery Plugin to create highly configurable floating panels, modals, tooltips, hints/notifiers or contextmenus for use in a backend solution and other web applications.
Stars: ✭ 89 (-77.47%)
Mutual labels: tooltip
Popper Core
🍿 JavaScript positioning library for tooltips, popovers, dropdowns, and more
Stars: ✭ 18,903 (+4685.57%)
Mutual labels: tooltip
Bootstrap-Confirmation
Bootstrap plugin for on-place confirm boxes using Popover
Stars: ✭ 303 (-23.29%)
Mutual labels: tooltip
postel
tiny react library for building tooltips, flyovers, menus and more
Stars: ✭ 70 (-82.28%)
Mutual labels: tooltip
Tooltip Sequence
A simple step by step tooltip helper for any site
Stars: ✭ 287 (-27.34%)
Mutual labels: tooltip
Quantum Nox Firefox Dark Full Theme
These usercontent and userchrome files will give a full themed dark color to Firefox Quantum, menus and dialogs included, as well as the scrollbars. You can also use the JS files to enable multirow tabs and other functions.
Stars: ✭ 328 (-16.96%)
Mutual labels: tooltip
VueTippy
For tippyJS v1 use v1 branchDirective wrapper for Tippy.js
Vue 3 alpha version
Documentation
For full v4 documentation, visit https://kabbouchi.github.io/vue-tippy/4.0/.
Installation
npm install --save vue-tippy
# or
yarn add vue-tippy
Usage
Bundler (Webpack, Rollup)
import Vue from "vue";
import VueTippy, { TippyComponent } from "vue-tippy";
Vue.use(VueTippy);
Vue.component("tippy", TippyComponent);
// or
Vue.use(VueTippy, {
directive: "tippy", // => v-tippy
flipDuration: 0,
popperOptions: {
modifiers: {
preventOverflow: {
enabled: false
}
}
}
});
Vue.component("tippy", TippyComponent);
// Add additional themes.
import "tippy.js/themes/light.css";
import "tippy.js/themes/light-border.css";
import "tippy.js/themes/google.css";
import "tippy.js/themes/translucent.css";
Browser
<!-- From CDN -->
<script src="https://unpkg.com/vue-tippy/dist/vue-tippy.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-tippy/dist/vue-tippy.min.js"></script>
Basic Usage
<button content="Hi!" v-tippy>My Button!</button>
<button :content="dynamicTitle" v-tippy>My Button!</button>
<button content="Hello" v-tippy="{ placement : 'top', arrow: true }">
My Button!
</button>
Using Vue component
<tippy to="myTrigger" arrow>
<div>
<h3>Header</h3>
<p style="color: black">{{ message }} - data binding</p>
<button @click="clicked">Click</button>
</div>
</tippy>
<button name="myTrigger">Tippy Trigger</button>
<tippy arrow>
<template v-slot:trigger>
<button>Tippy Trigger</button>
</template>
<div>
<h3>Header</h3>
<p style="color: black">{{ message }} - data binding</p>
<button @click="clicked">Click</button>
</div>
</tippy>
<tippy :content="`tooltip: ${message}`" arrow>
<template v-slot:trigger>
<button>Tippy Trigger</button>
</template>
</tippy>
For full v4 documentation, visit https://kabbouchi.github.io/vue-tippy/4.0/.
For more info on TippyJS view the documentation and demo here:
https://atomiks.github.io/tippyjs/https://kabbouchi.github.io/tippyjs-v4-docs/
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].