ui/docs/content/3.components/tooltip.md

description, links

description	links
A popup that reveals information when hovering over an element.	label icon to Tooltip i-custom-radix-vue https://www.radix-vue.com/components/tooltip.html label icon to GitHub i-simple-icons-github https://github.com/benjamincanac/ui3/tree/dev/src/runtime/components/Tooltip.vue

Usage

Use a Button or any other component in the default slot of the Tooltip.

::important Make sure to wrap your app with the 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 in the Tooltip.

::component-code

prettier: true ignore:

• text

• kbds props: text: 'Open on GitHub' kbds:

  • meta
  • G slots: default: |

---

:u-button{icon="i-simple-icons-github"} ::

::tip You can use special keys like meta that displays 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: |

---

:u-button{icon="i-simple-icons-github"} ::

::tip This can be configured globally through the tooltip.delayDuration option in the 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: |

---

: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: |

---

:u-button{icon="i-simple-icons-github"} ::

Disabled

Use the disabled prop to disable the Tooltip.

::component-code

prettier: true ignore:

• text props: disabled: true text: 'Open on GitHub' slots: default: |

---

: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"}

::note In this example, press :kbd{value="O"} to toggle the Tooltip. ::

API

Props

:component-props

Slots

:component-slots

Emits

:component-emits

Theme

:component-theme