mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-15 04:29:37 +01:00
196 lines
3.1 KiB
Markdown
196 lines
3.1 KiB
Markdown
---
|
|
description: A popup that reveals information when hovering over an element.
|
|
links:
|
|
- label: Tooltip
|
|
icon: i-custom-radix-vue
|
|
to: https://www.radix-vue.com/components/tooltip.html
|
|
- label: GitHub
|
|
icon: i-simple-icons-github
|
|
to: https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Tooltip.vue
|
|
---
|
|
|
|
## Usage
|
|
|
|
::note
|
|
Make sure to wrap your app with the [`App`](/components/app) component to make the Tooltip work properly.
|
|
::
|
|
|
|
### Text
|
|
|
|
Use the `text` prop to set the content of the Tooltip.
|
|
|
|
::component-code
|
|
---
|
|
prettier: true
|
|
props:
|
|
text: 'Open on GitHub'
|
|
slots:
|
|
default: |
|
|
|
|
<UButton icon="i-simple-icons-github" />
|
|
---
|
|
|
|
:u-button{icon="i-simple-icons-github"}
|
|
::
|
|
|
|
### Kbds
|
|
|
|
Use the `kbds` prop to render [Kbd](/components/kbd) components in the Tooltip.
|
|
|
|
::component-code
|
|
---
|
|
prettier: true
|
|
ignore:
|
|
- text
|
|
- kbds
|
|
props:
|
|
text: 'Open on GitHub'
|
|
kbds:
|
|
- meta
|
|
- G
|
|
slots:
|
|
default: |
|
|
|
|
<UButton icon="i-simple-icons-github" />
|
|
---
|
|
|
|
:u-button{icon="i-simple-icons-github"}
|
|
::
|
|
|
|
::tip
|
|
You can use special keys there like `meta` that will display as `⌘` on macOS and `Ctrl` on other platforms.
|
|
::
|
|
|
|
### Delay
|
|
|
|
Use the `delay-duration` prop to change the delay before the Tooltip appears. For example, you can make it appear instantly by setting it to `0`.
|
|
|
|
::component-code
|
|
---
|
|
prettier: true
|
|
ignore:
|
|
- text
|
|
props:
|
|
delayDuration: 0
|
|
text: 'Open on GitHub'
|
|
slots:
|
|
default: |
|
|
|
|
<UButton icon="i-simple-icons-github" />
|
|
---
|
|
|
|
:u-button{icon="i-simple-icons-github"}
|
|
::
|
|
|
|
::tip
|
|
This can be configured globally through the `tooltip.delayDuration` option in the [`App`](/components/app) component.
|
|
::
|
|
|
|
### Arrow
|
|
|
|
Use the `arrow` prop to display an arrow on the Tooltip.
|
|
|
|
::component-code
|
|
---
|
|
prettier: true
|
|
ignore:
|
|
- text
|
|
- arrow
|
|
props:
|
|
arrow: true
|
|
text: 'Open on GitHub'
|
|
slots:
|
|
default: |
|
|
|
|
<UButton icon="i-simple-icons-github" />
|
|
---
|
|
|
|
:u-button{icon="i-simple-icons-github"}
|
|
::
|
|
|
|
### Content
|
|
|
|
Use the `content` prop to control how the Tooltip content is rendered, like its side for example.
|
|
|
|
::component-code
|
|
---
|
|
prettier: true
|
|
ignore:
|
|
- text
|
|
items:
|
|
content.side:
|
|
- right
|
|
- left
|
|
- top
|
|
- bottom
|
|
props:
|
|
content:
|
|
side: right
|
|
sideOffset: 8
|
|
text: 'Open on GitHub'
|
|
slots:
|
|
default: |
|
|
|
|
<UButton icon="i-simple-icons-github" />
|
|
---
|
|
|
|
:u-button{icon="i-simple-icons-github"}
|
|
::
|
|
|
|
::tip{to="https://www.radix-vue.com/components/tooltip#content" target="_blank"}
|
|
Take a look at all the `TooltipContent` props available in the Radix Vue documentation.
|
|
::
|
|
|
|
### Disabled
|
|
|
|
Use the `disabled` prop to disable the Tooltip.
|
|
|
|
::component-code
|
|
---
|
|
prettier: true
|
|
ignore:
|
|
- text
|
|
props:
|
|
disabled: true
|
|
text: 'Open on GitHub'
|
|
slots:
|
|
default: |
|
|
|
|
<UButton icon="i-simple-icons-github" />
|
|
---
|
|
|
|
:u-button{icon="i-simple-icons-github"}
|
|
::
|
|
|
|
## Examples
|
|
|
|
### Control open state
|
|
|
|
You can control the open state by using the `default-open` prop or the `v-model:open` directive.
|
|
|
|
::component-example
|
|
---
|
|
name: 'tooltip-open-example'
|
|
props:
|
|
class: 'w-full'
|
|
---
|
|
::
|
|
|
|
## API
|
|
|
|
### Props
|
|
|
|
:component-props
|
|
|
|
### Slots
|
|
|
|
:component-slots
|
|
|
|
### Events
|
|
|
|
:component-events
|
|
|
|
## Theme
|
|
|
|
:component-theme
|