Feedback

Tooltip

Testo contestuale che appare al hover/focus su un elemento. Disponibile come componente Vue e come direttiva v-tooltip per uso diretto su qualsiasi elemento HTML.

Import

// Componente
import { Tooltip } from '@pzeta/vue-components'

// Direttiva
import { vTooltip } from '@pzeta/vue-components'

// Oppure tramite plugin (registra entrambi):
import { FeedbackPlugin } from '@pzeta/vue-components'
app.use(FeedbackPlugin)

Utilizzo come componente

Il componente <Tooltip> wrappa l'elemento target nello slot default e mostra il tooltip al suo interno.

La direttiva v-tooltip si applica direttamente a qualsiasi elemento HTML senza wrapper.

Prop	Tipo	Default	Descrizione
`content`	`string`	—	Testo del tooltip
`position`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`	Posizione rispetto all'elemento target
`trigger`	`'hover' \| 'focus' \| 'click'`	`'hover'`	Evento che attiva il tooltip
`disabled`	`boolean`	`false`	Disabilita il tooltip
`id`	`string`	—	ID personalizzato (default: generato automaticamente)
`class`	`string`	—	Classe CSS aggiuntiva per il box del tooltip
`showDelay`	`number`	`0`	Ritardo in ms prima di mostrare il tooltip
`hideDelay`	`number`	`0`	Ritardo in ms prima di nascondere il tooltip
`autoHide`	`boolean`	`true`	Nasconde automaticamente al mouse leave
`escape`	`boolean`	`true`	Se `true` fa escape dell'HTML; se `false` interpreta HTML (sanitizzato)
`fitContent`	`boolean`	`true`	Adatta la larghezza al contenuto
`zIndex`	`number`	`1100`	Z-index del tooltip

Evento	Payload	Descrizione
`show`	—	Emesso quando il tooltip diventa visibile
`hide`	—	Emesso quando il tooltip viene nascosto

Slot	Scope	Descrizione
`default`	—	Elemento target su cui il tooltip è ancorato
`content`	—	Contenuto custom del tooltip (sostituisce la prop `content`)

Opzione	Tipo	Default	Descrizione
`value`	`string`	—	Testo da mostrare
`position`	`'top' \| 'bottom' \| 'left' \| 'right'`	`'top'`	Posizione del tooltip
`showDelay`	`number`	`0`	Ritardo in ms prima di mostrare
`hideDelay`	`number`	`0`	Ritardo in ms prima di nascondere
`disabled`	`boolean`	`false`	Disabilita il tooltip
`escape`	`boolean`	`true`	Escape HTML nel contenuto
`tooltipClass`	`string`	—	Classi CSS aggiuntive
`zIndex`	`number`	`9999`	Z-index del tooltip

Esempi

Componente: posizioni

Componente: trigger click

Componente: contenuto HTML via slot

Componente: con delay

Direttiva: configurazione avanzata

Direttiva: disabilitazione condizionale

Registrazione manuale della direttiva

// main.ts
import { createApp } from 'vue'
import { vTooltip } from '@pzeta/vue-components'
import App from './App.vue'

const app = createApp(App)
app.directive('tooltip', vTooltip)
app.mount('#app')

Accessibilità

Il componente usa aria-describedby sull'elemento target con l'ID del tooltip.
Il tooltip ha role="tooltip".
La direttiva aggiunge role="tooltip" al nodo DOM creato.
Il tooltip si chiude con il tasto Escape.
Si attiva anche con focus per supporto navigazione da tastiera.

Metodi esposti (componente)

const tooltipRef = ref()

// Controllo programmatico
tooltipRef.value.show()    // Mostra
tooltipRef.value.hide()    // Nasconde
tooltipRef.value.toggle()  // Toggle

TypeScript

import type { TooltipProps, TooltipEmits, TooltipSlots } from '@pzeta/vue-components'
import type { TooltipPosition, TooltipTrigger } from '@pzeta/vue-components'
import { vTooltip } from '@pzeta/vue-components'

// TooltipPosition = 'top' | 'bottom' | 'left' | 'right'
// TooltipTrigger  = 'hover' | 'focus' | 'click'

Toast

Sistema di notifiche temporanee posizionate sullo schermo. Si usa tramite il composable useToast() per mostrare messaggi da qualsiasi componente.