vue-tippy/docs/content/en/flavor/component.md

title, description, position, category

title	description	position	category
Component		12	Flavor

Work in progess

Simple, high-level, great for building complex tooltips with interactions

Click here to see full documentation on props.

<Tippy /> additional props:

Prop	Type	Default	Description
tag	String	span	Trigger wrapper tag
content-tag	String	span	Content wrapper tag
content-class	String	null	Content wrapper class
to	Element or String	null	Target selector

Basic Usage

<tippy content="Hi!">
  <button>Tippy!</button>
</tippy>

Advanced Usage

Example 1

<tippy
    arrow
    interactive
    :hide-on-click="false"
    @state="onStateChange"
>
  <template #default="{ state }">
    <div>
      <h1>Tippy!</h1>
      <p>{{ state }}</p>
    </div>
  </template>

  <template #content="{ hide }">
    Hi! <button @click="hide()">X</button>
  </template>
</tippy>

Example 2

<tippy tag="button" content-tag="div" content-class="content-wrapper">
  <template #default>Tippy!</template>
  <template #content>Hi!</template>
</tippy>

Singleton

Example 1

<tippy-singleton move-transition="transform 0.2s ease-out" placement="top">
  <tippy content="Working tooltip">
    Button 1
  </tippy>

  <tippy content="Working tooltip">
    Button 2
  </tippy>
</tippy-singleton>