docs
This commit is contained in:
Georges KABBOUCHI
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<div>
|
||||
<div
|
||||
v-for="(item, i) in items"
|
||||
:key="i"
|
||||
class="mt-3 flex"
|
||||
>
|
||||
<span
|
||||
:class="`list-${type}`"
|
||||
class="mt-px mr-3 flex-shrink-0"
|
||||
>
|
||||
<component
|
||||
:is="iconName"
|
||||
class="h-6 w-6"
|
||||
/>
|
||||
</span>
|
||||
<div v-html="item"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'primary',
|
||||
validator(value) {
|
||||
return ['primary', 'info', 'success', 'warning', 'danger'].includes(value)
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
iconName() {
|
||||
return this.icon || ({
|
||||
primary: 'IconBadgeCheck',
|
||||
info: 'IconInformationCircle',
|
||||
success: 'IconCheckCircle',
|
||||
warning: 'IconExclamationCircle',
|
||||
danger: 'IconXCircle'
|
||||
})[this.type]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Primary */
|
||||
.list-primary {
|
||||
@apply text-primary-500;
|
||||
}
|
||||
/* Info */
|
||||
.list-info {
|
||||
@apply text-blue-500;
|
||||
}
|
||||
/* Success */
|
||||
.list-success {
|
||||
@apply text-green-500;
|
||||
}
|
||||
/* Warning */
|
||||
.list-warning {
|
||||
@apply text-orange-500;
|
||||
}
|
||||
/* Danger */
|
||||
.list-danger {
|
||||
@apply text-red-500;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,114 @@
|
||||
---
|
||||
title: Animations
|
||||
description: ''
|
||||
category: Getting started
|
||||
position: 6
|
||||
---
|
||||
|
||||
Tippies use an opacity `fade` transition by default.
|
||||
|
||||
## Included animations
|
||||
|
||||
The package comes with extra animations for you to use:
|
||||
|
||||
- `shift-away`
|
||||
- `shift-toward`
|
||||
- `scale`
|
||||
- `perspective`
|
||||
|
||||
They need to be imported separately.
|
||||
|
||||
```js
|
||||
import 'tippy.js/animations/scale.css'
|
||||
```
|
||||
|
||||
Pass the animation name as the `animation` prop:
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
animation: 'scale',
|
||||
})
|
||||
```
|
||||
|
||||
Each of these animations also has 3 variants (normal, subtle, and extreme) using the following format:
|
||||
|
||||
```js
|
||||
import 'tippy.js/animations/scale.css'
|
||||
import 'tippy.js/animations/scale-subtle.css'
|
||||
import 'tippy.js/animations/scale-extreme.css'
|
||||
```
|
||||
|
||||
## Custom animations
|
||||
|
||||
To create your own animation:
|
||||
|
||||
- Specify the animation name in the `[data-animation]` attribute selector
|
||||
- Target the visibility state of the tippy: `[data-state="hidden"]` or `[data-state="visible"]`
|
||||
- Depending on the animation, target the placement of the tippy too: e.g. `[data-placement^="top"]`
|
||||
|
||||
```css
|
||||
.tippy-box[data-animation='rotate'][data-state='hidden'] {
|
||||
opacity: 0;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
animation: 'rotate',
|
||||
})
|
||||
```
|
||||
|
||||
## Inertia
|
||||
|
||||
There's a prop named `inertia` that adds an elastic inertial effect to the tippy, which is a limited CSS-only way to mimic spring physics.
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
inertia: true,
|
||||
})
|
||||
```
|
||||
|
||||
You can customize this prop in your CSS:
|
||||
|
||||
```css
|
||||
.tippy-box[data-inertia][data-state='visible'] {
|
||||
transition-timing-function: cubic-bezier(...);
|
||||
}
|
||||
```
|
||||
|
||||
## Material filling effect
|
||||
|
||||
Import `backdrop.css` & `animations/shift-away.css` stylesheets.
|
||||
|
||||
```js
|
||||
import 'tippy.js/dist/backdrop.css'
|
||||
import 'tippy.js/animations/shift-away.css'
|
||||
|
||||
useTippy(target, {
|
||||
animateFill: true,
|
||||
})
|
||||
```
|
||||
|
||||
## CSS animations
|
||||
|
||||
Maybe plain transitions aren't enough for your use case. You can also use CSS animations (e.g. `animate.css`):
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
onMount(instance) {
|
||||
const box = instance.popper.firstElementChild
|
||||
requestAnimationFrame(() => {
|
||||
box.classList.add('animated')
|
||||
box.classList.add('wobble')
|
||||
})
|
||||
},
|
||||
onHidden(instance) {
|
||||
const box = instance.popper.firstElementChild
|
||||
box.classList.remove('animated')
|
||||
box.classList.remove('wobble')
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
You can also use `@keyframes` and add the animation property to your `animation` selector too.
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
title: Basic Usage
|
||||
description: ''
|
||||
category: Getting started
|
||||
position: 4
|
||||
---
|
||||
|
||||
### Vue Directive
|
||||
|
||||
```html
|
||||
<template>
|
||||
<button v-tippy="{ content: 'Hi!' }">Tippy!</button>
|
||||
</template>
|
||||
|
||||
<!--
|
||||
The below is optional in case you
|
||||
installed the plugin globally
|
||||
-->
|
||||
<script>
|
||||
import { directive } from 'vue-tippy'
|
||||
|
||||
export default {
|
||||
directives: {
|
||||
'v-tippy': directive,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Vue Component
|
||||
|
||||
```html
|
||||
<template>
|
||||
<tippy content="Hi!">
|
||||
<button>Tippy!</button>
|
||||
</tippy>
|
||||
</template>
|
||||
|
||||
<!--
|
||||
The below is optional in case you
|
||||
installed the plugin globally
|
||||
-->
|
||||
<script>
|
||||
import { Tippy } from 'vue-tippy'
|
||||
|
||||
export default {
|
||||
components: [Tippy],
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Using composition api
|
||||
|
||||
```js
|
||||
import { defineComponent, ref, h } from 'vue'
|
||||
import { useTippy } from 'vue-tippy'
|
||||
|
||||
export default defineComponent({
|
||||
setup() {
|
||||
const button = ref()
|
||||
|
||||
useTippy(button, {
|
||||
content: 'Hi!',
|
||||
})
|
||||
|
||||
return () => h('button', { ref: button }, 'Tippy!')
|
||||
},
|
||||
})
|
||||
```
|
||||
@@ -0,0 +1,31 @@
|
||||
---
|
||||
title: Configuration
|
||||
description: ''
|
||||
category: Getting started
|
||||
position: 3
|
||||
---
|
||||
|
||||
### Using global installation
|
||||
|
||||
```js
|
||||
import { createApp } from 'vue'
|
||||
import VueTippy from 'vue-tippy'
|
||||
|
||||
const app = createApp({})
|
||||
|
||||
app.use(VueTippy, {
|
||||
defaultProps: { placement: 'right' },
|
||||
})
|
||||
|
||||
app.mount('#app')
|
||||
```
|
||||
|
||||
### Using global function
|
||||
|
||||
```js
|
||||
import { setDefaultProps } from 'vue-tippy'
|
||||
|
||||
setDefaultProps({
|
||||
placement: 'right',
|
||||
})
|
||||
```
|
||||
@@ -0,0 +1,11 @@
|
||||
---
|
||||
title: Advanced - Custom Follow Mouse
|
||||
menuTitle: Custom Follow Mouse
|
||||
description: ''
|
||||
position: 9
|
||||
category: Examples
|
||||
csb_link: https://codesandbox.io/embed/vue-tippy-follow-mouse-jsewo?module=/src/App.js&hidenavigation=1&theme=dark
|
||||
fullscreen: true
|
||||
---
|
||||
|
||||
<code-sandbox :src="csb_link"></code-sandbox>
|
||||
@@ -2,12 +2,24 @@
|
||||
title: Introduction
|
||||
description: 'What is VueTippy?'
|
||||
position: 1
|
||||
category: ''
|
||||
category: 'Getting started'
|
||||
features:
|
||||
- 'Optimized positioning engine for flipping and overflow prevention'
|
||||
- 'Accessible by default, WAI-ARIA compliant'
|
||||
- 'Themeable, style via custom CSS, includes extra themes and animations'
|
||||
- 'TypeScript support out of the box'
|
||||
- 'Works as Vue Directive <code>v-tippy</code>'
|
||||
- 'Works as Vue Component <code><tippy/></code>'
|
||||
- 'Has compostion api <code>useTippy()</code>'
|
||||
---
|
||||
|
||||
<a class="no-underline hover:no-underline text-blue-dark" href='https://github.com/atomiks/tippyjs' target='_blank'>Tippy.js</a> is a lightweight, vanilla JS tooltip library powered by Popper.js.
|
||||
<a class="no-underline hover:no-underline text-blue-dark" href='https://github.com/atomiks/tippyjs' target='_blank'>Tippy.js</a> is the complete tooltip, popover, dropdown, and menu solution for the web, powered by Popper.
|
||||
<br/>
|
||||
<br/>
|
||||
VueTippy is a Vue.js wrapper for the Tippy.js library, which allows you to use the tooltips as a Vue component and as a directive.
|
||||
`VueTippy` is a `Vue.js v3` wrapper for the `Tippy.js` library, which allows you to use the tooltips as a Vue component and as a directive.
|
||||
|
||||
It is designed to work friendly with Vue.js
|
||||
It is designed to work-friendly with `Vue.js`
|
||||
|
||||
## Features
|
||||
|
||||
<feature-list :items="features"></feature-list>
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
---
|
||||
title: Installation
|
||||
description: ''
|
||||
category: Getting started
|
||||
position: 2
|
||||
---
|
||||
|
||||
Add `vue-tippy` dependency to your project:
|
||||
|
||||
<code-group>
|
||||
<code-block label="Yarn" active>
|
||||
|
||||
```bash
|
||||
yarn add vue-tippy@v6
|
||||
```
|
||||
|
||||
</code-block>
|
||||
<code-block label="NPM">
|
||||
|
||||
```bash
|
||||
npm install vue-tippy@v6
|
||||
```
|
||||
|
||||
</code-block>
|
||||
|
||||
### Install VueTippy globally (optional)
|
||||
|
||||
```js
|
||||
import { createApp } from 'vue'
|
||||
|
||||
import VueTippy from 'vue-tippy'
|
||||
// or
|
||||
import { plugin as VueTippy } from 'vue-tippy'
|
||||
|
||||
const app = createApp({})
|
||||
|
||||
app.use(
|
||||
VueTippy,
|
||||
// optional
|
||||
{
|
||||
directive: 'tippy', // => v-tippy
|
||||
component: 'tippy', // => <tippy/>
|
||||
}
|
||||
)
|
||||
|
||||
app.mount('#app')
|
||||
```
|
||||
@@ -0,0 +1,696 @@
|
||||
---
|
||||
title: All Props
|
||||
description: ''
|
||||
category: Getting started
|
||||
position: 5
|
||||
---
|
||||
|
||||
`Props` are configurable properties you can pass optionally to:
|
||||
|
||||
```html
|
||||
<!-- Tippy Directive -->
|
||||
<button v-tippy="props">Hello</button>
|
||||
```
|
||||
|
||||
```html
|
||||
<!-- Tippy Component -->
|
||||
<tippy prop1 prop2 ...>
|
||||
<button>World!</button>
|
||||
</tippy>
|
||||
```
|
||||
|
||||
```js
|
||||
// Composition api
|
||||
useTippy(target, props)
|
||||
```
|
||||
|
||||
## allowHTML
|
||||
|
||||
Determines if content strings are parsed as HTML instead of text.
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
// default
|
||||
allowHTML: false,
|
||||
// parse `content` strings as HTML
|
||||
allowHTML: true,
|
||||
})
|
||||
```
|
||||
|
||||
## animateFill
|
||||
|
||||
Determines if the background fill color of the tippy should be animated.
|
||||
|
||||
```js
|
||||
// You must also import the backdrop.css
|
||||
// and animations/shift-away.css stylesheets
|
||||
// for styling to work.
|
||||
|
||||
import 'tippy.js/dist/backdrop.css'
|
||||
import 'tippy.js/animations/shift-away.css'
|
||||
|
||||
useTippy(target, {
|
||||
// default
|
||||
animateFill: false,
|
||||
// enable it
|
||||
animateFill: true,
|
||||
})
|
||||
```
|
||||
|
||||
## animation
|
||||
|
||||
The type of transition animation. See [Animations](/animations) for details.
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
// default
|
||||
animation: 'fade',
|
||||
})
|
||||
```
|
||||
|
||||
## appendTo
|
||||
|
||||
The element to append the tippy to. If `interactive: true`, the default behavior is `appendTo: "parent"`.
|
||||
|
||||
Sometimes the tippy needs to be appended to a different DOM context due to accessibility, clipping, or z-index issues.
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
// default (takes reference as an argument)
|
||||
appendTo: () => document.body,
|
||||
// append to reference's parentNode
|
||||
appendTo: 'parent',
|
||||
// append to an Element
|
||||
appendTo: element,
|
||||
})
|
||||
```
|
||||
|
||||
## aria
|
||||
|
||||
The aria attribute configuration. Both properties are optional:
|
||||
|
||||
- `content`: The `aria-*` attribute applied to the reference element to announce the tippy content.
|
||||
- `expanded`: Whether to add an `aria-expanded` attribute to the reference element.
|
||||
|
||||
```js
|
||||
useTippy(targets, {
|
||||
// default
|
||||
aria: {
|
||||
// `null` when interactive: true, otherwise "describedby"
|
||||
content: 'auto',
|
||||
// matches `interactive` boolean
|
||||
expanded: 'auto',
|
||||
},
|
||||
|
||||
// announce as a label rather than a description
|
||||
// the content will also be announced with `interactive: true`
|
||||
aria: {
|
||||
content: 'labelledby',
|
||||
},
|
||||
|
||||
// to abide by strict WCAG 2.1 rules with `interactive: true` to make it
|
||||
// hoverable if it's not actually interactive, but the content will still be
|
||||
// announced
|
||||
aria: {
|
||||
content: 'describedby',
|
||||
},
|
||||
|
||||
// disable completely, left up to you to control
|
||||
aria: {
|
||||
content: null,
|
||||
expanded: false,
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
## arrow
|
||||
|
||||
Determines if the tippy has an arrow.
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
// default
|
||||
arrow: true,
|
||||
// disable arrow
|
||||
arrow: false,
|
||||
// custom arrow string
|
||||
arrow: '<svg>...</svg>',
|
||||
// custom arrow element
|
||||
arrow: svgElement,
|
||||
})
|
||||
```
|
||||
|
||||
## content
|
||||
|
||||
The content of the tippy.
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
// default
|
||||
content: '',
|
||||
// string
|
||||
content: 'Hello',
|
||||
// Element
|
||||
content: document.createElement('div'),
|
||||
// (reference) => string | Element
|
||||
content: reference => reference.getAttribute('title'),
|
||||
// import { ref } from 'vue'
|
||||
// const refContent = ref("Hi!")
|
||||
content: refContent,
|
||||
})
|
||||
```
|
||||
|
||||
## delay
|
||||
|
||||
Delay in ms once a trigger event is fired before tippy shows or hides.
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
// default
|
||||
delay: 0,
|
||||
// show and hide delay are 100ms
|
||||
delay: 100,
|
||||
// show delay is 100ms, hide delay is 200ms
|
||||
delay: [100, 200],
|
||||
// show delay is 100ms, hide delay is the default
|
||||
delay: [100, null],
|
||||
}
|
||||
```
|
||||
|
||||
## duration
|
||||
|
||||
Duration in ms of the transition animation.
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
// default
|
||||
duration: [300, 250],
|
||||
// show and hide durations are 100ms
|
||||
duration: 100,
|
||||
// show duration is 100ms, hide duration is 200ms
|
||||
duration: [100, 200],
|
||||
// show duration is 100ms, hide duration is the default
|
||||
duration: [100, null],
|
||||
}
|
||||
```
|
||||
|
||||
## followCursor
|
||||
|
||||
Determines if the tippy follows the user's mouse cursor.
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
// default
|
||||
followCursor: false,
|
||||
// follow on both x and y axes
|
||||
followCursor: true,
|
||||
// follow on x axis
|
||||
followCursor: 'horizontal',
|
||||
// follow on y axis
|
||||
followCursor: 'vertical',
|
||||
// follow until it shows (taking into account `delay`)
|
||||
followCursor: 'initial',
|
||||
})
|
||||
```
|
||||
|
||||
## getReferenceClientRect
|
||||
|
||||
Used as the positioning reference for the tippy.
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
// default (uses the reference passed as first argument)
|
||||
getReferenceClientRect: null,
|
||||
// function that returns a ClientRect object
|
||||
getReferenceClientRect: () => ({
|
||||
width: 100,
|
||||
height: 100,
|
||||
left: 100,
|
||||
right: 200,
|
||||
top: 100,
|
||||
bottom: 200,
|
||||
}),
|
||||
})
|
||||
```
|
||||
|
||||
## hideOnClick
|
||||
|
||||
Determines if the tippy hides upon clicking the reference or outside of the tippy. The behavior can depend upon the `trigger` events used.
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
// default
|
||||
hideOnClick: true,
|
||||
// never hide upon clicking
|
||||
hideOnClick: false,
|
||||
// hide only upon clicking the reference, but not outside
|
||||
hideOnClick: 'toggle',
|
||||
})
|
||||
```
|
||||
|
||||
## ignoreAttributes
|
||||
|
||||
When using UI (component) libraries like Vue, this is generally not necessary and slows down initialization perf a bit.
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
// default
|
||||
ignoreAttributes: true,
|
||||
// consider `data-tippy-*` attributes on the reference element
|
||||
ignoreAttributes: false,
|
||||
})
|
||||
```
|
||||
|
||||
## inertia
|
||||
|
||||
Determines if a (customizable) CSS spring-like animation is applied to the transition animation.
|
||||
|
||||
Changing the show duration to a higher value makes this look better.
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
// default
|
||||
inertia: false,
|
||||
// enable it
|
||||
inertia: true,
|
||||
})
|
||||
```
|
||||
|
||||
```css
|
||||
.tippy-box[data-inertia][data-state='visible'] {
|
||||
transition-timing-function: cubic-bezier(...);
|
||||
}
|
||||
```
|
||||
|
||||
## inlinePositioning
|
||||
|
||||
Provides enhanced support for `display: inline` elements. It will choose the most appropriate rect based on the placement.
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
// default
|
||||
inlinePositioning: false,
|
||||
// enable it
|
||||
inlinePositioning: true,
|
||||
})
|
||||
```
|
||||
|
||||
## interactive
|
||||
|
||||
Determines if the tippy has interactive content inside of it, so that it can be hovered over and clicked inside without hiding.
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
// default
|
||||
interactive: false,
|
||||
// enable it
|
||||
interactive: true,
|
||||
})
|
||||
```
|
||||
|
||||
## interactiveBorder
|
||||
|
||||
Determines the size of the invisible border around the tippy that will prevent it from hiding if the cursor left it.
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
// default
|
||||
interactiveBorder: 2,
|
||||
// 30px
|
||||
interactiveBorder: 30,
|
||||
})
|
||||
```
|
||||
|
||||
## interactiveDebounce
|
||||
|
||||
Determines the time in ms to debounce the interactive hide handler when the cursor leaves the tippy's interactive region.
|
||||
|
||||
Offers a temporal (rather than spacial) alternative to `interactiveBorder`, although it can be used in conjunction with it.
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
// default
|
||||
interactiveDebounce: 0,
|
||||
// 75ms
|
||||
interactiveDebounce: 75,
|
||||
})
|
||||
```
|
||||
|
||||
## maxWidth
|
||||
|
||||
Specifies the maximum width of the tippy. Useful to prevent it from being too horizontally wide to read.
|
||||
|
||||
<alert type="warning">
|
||||
This is applied to the `.tippy-box` (inner element), rather than the root positioned popper node. The core CSS applies `max-width: calc(100vw - 10px)` on the root popper node to prevent it from exceeding the viewport width on small screens.
|
||||
</alert>
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
// default
|
||||
maxWidth: 350,
|
||||
// no maxWidth
|
||||
maxWidth: 'none',
|
||||
})
|
||||
```
|
||||
|
||||
## moveTransition
|
||||
|
||||
Specifies the transition applied to the root positioned popper node. This describes the transition between "moves" (or position updates) of the popper element when it e.g. flips or changes target location.
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
// default
|
||||
moveTransition: '',
|
||||
// custom transition
|
||||
moveTransition: 'transform 0.2s ease-out',
|
||||
})
|
||||
```
|
||||
|
||||
## offset
|
||||
|
||||
Displaces the tippy from its reference element in pixels (skidding and distance).
|
||||
|
||||
See [Popper's docs](https://popper.js.org/docs/v2/modifiers/offset/) for details.
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
// default [skidding, distance]
|
||||
offset: [0, 10],
|
||||
})
|
||||
```
|
||||
|
||||
## onAfterUpdate
|
||||
|
||||
Invoked after the tippy props has been updated.
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
onAfterUpdate(instance, partialProps) {
|
||||
// ...
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
## onBeforeUpdate
|
||||
|
||||
Invoked before the tippy props has been updated.
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
onAfterUpdate(instance, partialProps) {
|
||||
// ...
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
## onClickOutside
|
||||
|
||||
Invoked when the user clicks anywhere outside of the tippy or reference element.
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
onClickOutside(instance, event) {
|
||||
// ...
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
## onCreate
|
||||
|
||||
Invoked once the tippy has been created.
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
onCreate(instance) {
|
||||
// ...
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
## onDestroy
|
||||
|
||||
Invoked once the tippy has been destroyed.
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
onDestroy(instance) {
|
||||
// ...
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
## onHide
|
||||
|
||||
Invoked once the tippy begins to hide.
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
onHide(instance) {
|
||||
// ...
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
<alert type="info">You can optionally `return false` from this lifecycle to cancel a hide based on a condition.</alert>
|
||||
|
||||
## onMount
|
||||
|
||||
Invoked once the tippy has been mounted to the DOM (and the popperInstance created).
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
onMount(instance) {
|
||||
// ...
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
## onShow
|
||||
|
||||
Invoked once the tippy begins to show.
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
onShow(instance) {
|
||||
// ...
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
<alert type="info">You can optionally `return false` from this lifecycle to cancel a show based on a condition.</alert>
|
||||
|
||||
## onShown
|
||||
|
||||
Invoked once the tippy has been fully transitioned in.
|
||||
|
||||
<alert type="info">Since this is achieved via CSS `transitionend`, it relies on your own event listeners if using a custom `render` function. You'll need to call the lifecycle manually in this case.</alert>
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
onShown(instance) {
|
||||
// ...
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
## onTrigger
|
||||
|
||||
Invoked once the tippy has been triggered by a DOM event (e.g. `mouseenter`).
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
onShown(instance, event) {
|
||||
// ...
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
## onUntrigger
|
||||
|
||||
Invoked once the tippy has been untriggered by a DOM event (e.g. `mouseleave`).
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
onUntrigger(instance, event) {
|
||||
// ...
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
## placement
|
||||
|
||||
The preferred placement of the tippy. Note that Popper's `flip` modifier can change this to the opposite placement if it has more space.
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
// default
|
||||
placement: 'top',
|
||||
|
||||
// full list:
|
||||
placement: 'top-start',
|
||||
placement: 'top-end',
|
||||
|
||||
placement: 'right',
|
||||
placement: 'right-start',
|
||||
placement: 'right-end',
|
||||
|
||||
placement: 'bottom',
|
||||
placement: 'bottom-start',
|
||||
placement: 'bottom-end',
|
||||
|
||||
placement: 'left',
|
||||
placement: 'left-start',
|
||||
placement: 'left-end',
|
||||
|
||||
// choose the side with most space
|
||||
placement: 'auto',
|
||||
placement: 'auto-start',
|
||||
placement: 'auto-end',
|
||||
})
|
||||
```
|
||||
|
||||
## popperOptions
|
||||
|
||||
Specifies custom Popper options. This gives you full control over the tippy's positioning. See [Popper's docs](https://popper.js.org/docs/v2/) for details.
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
// default
|
||||
popperOptions: {},
|
||||
// detailed example
|
||||
popperOptions: {
|
||||
strategy: 'fixed',
|
||||
modifiers: [
|
||||
{
|
||||
name: 'flip',
|
||||
options: {
|
||||
fallbackPlacements: ['bottom', 'right'],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'preventOverflow',
|
||||
options: {
|
||||
altAxis: true,
|
||||
tether: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
## role
|
||||
|
||||
Specifies the `role` attribute on the tippy element.
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
// default
|
||||
role: 'tooltip',
|
||||
})
|
||||
```
|
||||
|
||||
## showOnCreate
|
||||
|
||||
Determines if the tippy is shown once it gets created, respecting `delay`.
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
// default
|
||||
showOnCreate: false,
|
||||
// enable it
|
||||
showOnCreate: true,
|
||||
})
|
||||
```
|
||||
|
||||
## sticky
|
||||
|
||||
Determines if the tippy sticks to the reference element while it is mounted. This is usually not needed, but is useful if the reference element's position is animating, or to automatically update the tippy position without needing to manually do it in certain cases where the DOM layout changes.
|
||||
|
||||
<alert type="warning">This has a performance cost since checks are run on every animation frame. Use this only when necessary!</alert>
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
// default
|
||||
sticky: false,
|
||||
// enable it
|
||||
sticky: true,
|
||||
// only check the "reference" rect for changes
|
||||
sticky: 'reference',
|
||||
// only check the "popper" rect for changes
|
||||
sticky: 'popper',
|
||||
})
|
||||
```
|
||||
|
||||
## themes
|
||||
|
||||
Determines the theme of the tippy element. The core CSS defaults to a dark `#333` theme. This can be overridden by a custom theme. See [Themes](#themes) for details.
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
// default
|
||||
theme: '',
|
||||
// custom theme
|
||||
theme: 'tomato',
|
||||
})
|
||||
```
|
||||
|
||||
## touch
|
||||
|
||||
Determines the behavior on touch devices.
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
// default
|
||||
touch: true,
|
||||
// disable tippy from showing on touch devices
|
||||
touch: false,
|
||||
// require pressing & holding the screen to show it
|
||||
touch: 'hold',
|
||||
// same as above, but long-press behavior
|
||||
touch: ['hold', 500],
|
||||
})
|
||||
```
|
||||
|
||||
## trigger
|
||||
|
||||
Determines the events that cause the tippy to show. Multiple event names are separated by spaces.
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
// default
|
||||
trigger: 'mouseenter focus',
|
||||
// others:
|
||||
trigger: 'click',
|
||||
trigger: 'focusin',
|
||||
trigger: 'mouseenter click',
|
||||
// only programmatically trigger it
|
||||
trigger: 'manual',
|
||||
})
|
||||
```
|
||||
|
||||
## triggerTarget
|
||||
|
||||
The element(s) that the trigger event listeners are added to. Allows you to separate the tippy's positioning from its trigger source.
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
// default (reference is used)
|
||||
triggerTarget: null,
|
||||
// Element
|
||||
triggerTarget: someElement,
|
||||
// Element[]
|
||||
triggerTarget: [someElement1, someElement2],
|
||||
})
|
||||
```
|
||||
|
||||
## zIndex
|
||||
|
||||
Specifies the `z-index` CSS on the root popper node.
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
// default
|
||||
zIndex: 9999,
|
||||
})
|
||||
```
|
||||
@@ -1,42 +0,0 @@
|
||||
---
|
||||
title: Setup
|
||||
description: ''
|
||||
position: 2
|
||||
category: Guide
|
||||
---
|
||||
|
||||
Check the [Nuxt.js documentation](https://nuxtjs.org/guides/configuration-glossary/configuration-modules) for more information about installing and using modules in Nuxt.js.
|
||||
|
||||
## Installation
|
||||
|
||||
Add `@nuxtjs/xxx` dependency to your project:
|
||||
|
||||
<code-group>
|
||||
<code-block label="Yarn" active>
|
||||
|
||||
```bash
|
||||
yarn add @nuxtjs/xxx
|
||||
```
|
||||
|
||||
</code-block>
|
||||
<code-block label="NPM">
|
||||
|
||||
```bash
|
||||
npm install @nuxtjs/xxx
|
||||
```
|
||||
|
||||
</code-block>
|
||||
</code-group>
|
||||
|
||||
Then, add `@nuxtjs/xxx` to the `modules` section of `nuxt.config.js`:
|
||||
|
||||
```js[nuxt.config.js]
|
||||
{
|
||||
modules: [
|
||||
'@nuxtjs/xxx'
|
||||
],
|
||||
xxx: {
|
||||
// Options
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -0,0 +1,247 @@
|
||||
---
|
||||
title: Themes
|
||||
description: ''
|
||||
category: Getting started
|
||||
position: 7
|
||||
---
|
||||
|
||||
Tippies can have any custom styling via CSS.
|
||||
|
||||
## Included themes
|
||||
|
||||
The package comes with themes for you to use:
|
||||
|
||||
- `light`
|
||||
- `light-border`
|
||||
- `material`
|
||||
- `translucent`
|
||||
|
||||
They need to be imported separately.
|
||||
|
||||
```js
|
||||
import 'tippy.js/themes/light.css'
|
||||
```
|
||||
|
||||
Pass the theme name as the `theme` prop:
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
theme: 'light',
|
||||
})
|
||||
```
|
||||
|
||||
## Tippy elements
|
||||
|
||||
To learn how to create a theme, it's helpful to understand the basic structure of a tippy element:
|
||||
|
||||
```html
|
||||
<div data-tippy-root>
|
||||
<div class="tippy-box" data-placement="top">
|
||||
<div class="tippy-content">
|
||||
My content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
A tippy is essentially three nested `div`s.
|
||||
|
||||
- `[data-tippy-root]` is the outermost node. It is what Popper uses to position the tippy. You don't need to apply any styles to this element.
|
||||
- `tippy-box` is the actual box node.
|
||||
- `tippy-content` is the content node.
|
||||
|
||||
Depending on the props supplied, there will exist other elements inside it:
|
||||
|
||||
```html
|
||||
<div data-tippy-root>
|
||||
<div class="tippy-box" data-placement="top">
|
||||
<div class="tippy-backdrop"></div>
|
||||
<!-- animateFill: true -->
|
||||
<div class="tippy-arrow"></div>
|
||||
<!-- arrow: true -->
|
||||
<div class="tippy-content">
|
||||
My content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Creating a theme
|
||||
|
||||
Themes are created by including a class on the `tippy-box` element as part of a selector in the form `.tippy-box[data-theme~='theme']`.
|
||||
|
||||
Let's demonstrate this by creating our own theme called`tomato`:
|
||||
|
||||
```css
|
||||
.tippy-box[data-theme~='tomato'] {
|
||||
background-color: tomato;
|
||||
color: yellow;
|
||||
}
|
||||
```
|
||||
|
||||
To apply the theme:
|
||||
|
||||
```js
|
||||
useTippy(target, {
|
||||
theme: 'tomato',
|
||||
})
|
||||
```
|
||||
|
||||
Or using scoped style
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<button
|
||||
v-tippy="{
|
||||
content: 'Hi!',
|
||||
appendTo: 'parent',
|
||||
theme: 'tomato',
|
||||
arrow: false
|
||||
}"
|
||||
>
|
||||
Hello!
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
* >>> .tippy-box[data-theme~='tomato'] {
|
||||
background-color: tomato;
|
||||
color: yellow;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
<alert type="info"> <b>What is `~=`?</b>
|
||||
|
||||
Since `theme` can have multiple names, it allows you to target a single theme inside the space-separated list. Visit [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) for more information.
|
||||
|
||||
</alert>
|
||||
|
||||
## Styling the arrow
|
||||
|
||||
There are two types of arrows:
|
||||
|
||||
- CSS arrows (using `border-width`)
|
||||
- SVG arrows (using an `<svg>` element)
|
||||
|
||||
### CSS arrow
|
||||
|
||||
To style the default CSS arrow, target each different base placement using the `placement` prop and apply it to the `.tippy-arrow` element's `::before` pseudo-element:
|
||||
|
||||
```css
|
||||
.tippy-box[data-theme~='tomato'][data-placement^='top'] > .tippy-arrow::before {
|
||||
border-top-color: tomato;
|
||||
}
|
||||
.tippy-box[data-theme~='tomato'][data-placement^='bottom']
|
||||
> .tippy-arrow::before {
|
||||
border-bottom-color: tomato;
|
||||
}
|
||||
.tippy-box[data-theme~='tomato'][data-placement^='left']
|
||||
> .tippy-arrow::before {
|
||||
border-left-color: tomato;
|
||||
}
|
||||
.tippy-box[data-theme~='tomato'][data-placement^='right']
|
||||
> .tippy-arrow::before {
|
||||
border-right-color: tomato;
|
||||
}
|
||||
```
|
||||
|
||||
### SVG arrow
|
||||
|
||||
First import the `svg-arrow.css` stylesheet for SVG arrow styling:
|
||||
|
||||
```js
|
||||
import 'tippy.js/dist/svg-arrow.css'
|
||||
```
|
||||
|
||||
To color an SVG arrow, specify `fill` and target `.tippy-svg-arrow`:
|
||||
|
||||
```css
|
||||
.tippy-box[data-theme~='tomato'] > .tippy-svg-arrow {
|
||||
fill: tomato;
|
||||
}
|
||||
```
|
||||
|
||||
The shape isn't dependent on the placement for styling, which is why it doesn't require the CSS arrow's more verbose styles.
|
||||
|
||||
There is a default round arrow SVG shape exported from the package for you to use.
|
||||
|
||||
```js
|
||||
import { roundArrow } from 'vue-tippy'
|
||||
|
||||
useTippy(target, {
|
||||
arrow: roundArrow,
|
||||
})
|
||||
```
|
||||
|
||||
## Changing the arrow size
|
||||
|
||||
### Option 1: `transform: scale()`
|
||||
|
||||
This is the easiest technique and works for most cases:
|
||||
|
||||
```css
|
||||
.tippy-box[data-theme~='tomato'] > .tippy-arrow::before {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
```
|
||||
|
||||
### Option 2: Pixel increase
|
||||
|
||||
If your tippy theme has a `border` (e.g. the included `light-border` theme), then the `transform: scale()` technique distorts the border width of the arrow. Instead, you will need to change the size of the arrow in pixels directly.
|
||||
|
||||
## Arrow border
|
||||
|
||||
There is a stylesheet to aid in adding borders to your tippies:
|
||||
|
||||
```js
|
||||
import 'tippy.js/dist/border.css'
|
||||
```
|
||||
|
||||
This adds color inheritance for borders when using the default CSS arrow, and aids in creating SVG arrow borders.
|
||||
|
||||
### CSS arrow
|
||||
|
||||
```css
|
||||
/* The border of the arrow will now match the border of the box */
|
||||
.tippy-box[data-theme~='tomato'] {
|
||||
background: tomato;
|
||||
border: 1px solid yellow;
|
||||
}
|
||||
```
|
||||
|
||||
### SVG arrow
|
||||
|
||||
Duplicate the SVG arrow so that there are two of them, like so:
|
||||
|
||||
```js
|
||||
import { roundArrow } from 'vue-tippy'
|
||||
|
||||
useTippy(target, {
|
||||
arrow: roundArrow + roundArrow,
|
||||
})
|
||||
```
|
||||
|
||||
```css
|
||||
/* The border */
|
||||
.tippy-box[data-theme~='tomato'] > .tippy-svg-arrow > svg:first-child {
|
||||
fill: yellow;
|
||||
}
|
||||
|
||||
/* The fill */
|
||||
.tippy-box[data-theme~='tomato'] > .tippy-svg-arrow > svg:last-child {
|
||||
fill: tomato;
|
||||
}
|
||||
```
|
||||
|
||||
## Browser DevTools
|
||||
|
||||
It's highly recommended you inspect a tippy element via your browser's DevTools. An easy way to do this is to give it `hideOnClick: false` and `trigger: 'click'` props so that it stays visible when focus is switched to the DevTools window.
|
||||
|
||||
The tippy element gets appended to the very end of the `<body>`, so you should scroll down the elements panel. If `interactive: true`, then the tippy is appended to the reference element's parentNode instead.
|
||||
+2
-1
@@ -1,7 +1,8 @@
|
||||
import theme from '@nuxt/content-theme-docs'
|
||||
|
||||
export default theme({
|
||||
components: true,
|
||||
docs: {
|
||||
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
+3
-2
@@ -18,7 +18,8 @@
|
||||
"scripts": {
|
||||
"build": "NODE_ENV=production rollup -c rollup.config.js",
|
||||
"build:dts": "api-extractor run --local --verbose",
|
||||
"dev": "webpack-dev-server --mode=development"
|
||||
"dev": "webpack-dev-server --mode=development",
|
||||
"dev:docs": "cd docs && yarn dev"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"vue": "^3.0.0"
|
||||
@@ -57,4 +58,4 @@
|
||||
"tags": "vetur/tags.json",
|
||||
"attributes": "vetur/attributes.json"
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user