add singleton docs
This commit is contained in:
@@ -60,3 +60,24 @@ Click [here](/props) to see full documentation on props.
|
|||||||
<template #content>Hi!</template>
|
<template #content>Hi!</template>
|
||||||
</tippy>
|
</tippy>
|
||||||
```
|
```
|
||||||
|
## Singleton
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
```html
|
||||||
|
<tippy-singleton move-transition="transform 0.2s ease-out" placement="top">
|
||||||
|
<tippy
|
||||||
|
class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
|
||||||
|
content="Working tooltip"
|
||||||
|
>
|
||||||
|
Button 1
|
||||||
|
</tippy>
|
||||||
|
|
||||||
|
<tippy
|
||||||
|
class="text-sm py-2 px-3 bg-gray-900 text-white rounded-lg"
|
||||||
|
content="Working tooltip"
|
||||||
|
>
|
||||||
|
Button 2
|
||||||
|
</tippy>
|
||||||
|
</tippy-singleton>
|
||||||
|
```
|
||||||
|
|||||||
@@ -83,3 +83,28 @@ useTippy(btn, {
|
|||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Singleton
|
||||||
|
|
||||||
|
### Example 1
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<button :ref="v => singletons.push(v)" v-tippy="'Tooltip 1'">Button 1</button>
|
||||||
|
<button :ref="v => singletons.push(v)" v-tippy="'Tooltip 2'">Button 2</button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { useSingleton } from 'vue-tippy'
|
||||||
|
import Counter from '@components/Counter.vue'
|
||||||
|
|
||||||
|
const singletons = ref([])
|
||||||
|
|
||||||
|
useSingleton(singletons, {
|
||||||
|
placement: 'top',
|
||||||
|
moveTransition: 'transform 0.2s ease-out',
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|||||||
Reference in New Issue
Block a user