Tooltip

Tooltips display messages in a popover.

Basic Usage

<script setup>
import { Tooltip, Btn } from '@8ctavio/vergil/components'
</script>

<template>
    <Tooltip text="Lost item can be claimed on lower levels">
        <Btn label="Attention Traveler!"/>
    </Tooltip>
</template>

Props

All Popover props are available for Tooltip.

Text

text: string

MiniMarkup

<Tooltip text="Recon">
    <Btn label="Lost and Found"/>
</Tooltip>

Delay

delay: number

Popover opening delay in milliseconds. If the trigger prop is set to 'hover', delay defaults to 400.

<Tooltip text="Tooltip" :delay="0">
    <Btn label="Toggle Tooltip"/>
</Tooltip>

Trigger

trigger: 'click' | 'hover' = 'hover'

<Tooltip text="Hover Trigger" trigger="hover">
    <Btn label="Hover Tooltip"/>
</Tooltip>
<Tooltip text="Click Trigger" trigger="click">
    <Btn label="Click Tooltip"/>
</Tooltip>

Arrow

arrow: boolean

<Tooltip text="Tooltip with Arrow" arrow>
    <Btn label="Arrow"/>
</Tooltip>

Offset

offset: number

Distance in px of gap between reference element and tooltip.

<Tooltip text="Text" placement="bottom" :offset="0">
    <Btn label="Tooltip"/>
</Tooltip>

The offset prop default value is determined through a function that receives the arrow prop. The following function is used by default.

arrow => arrow ? 2 : 5

Padding

padding: number = 6

Shift axis virtual padding in px left when the tooltip shifts.

Placement

placement: Placement = 'top'

Possible placement values are shown below.

type Placement =
    | 'top' | 'top-start' | 'top-end'
    | 'right' | 'right-start' | 'right-end'
    | 'bottom' | 'bottom-start' | 'bottom-end'
    | 'left' | 'left-start' | 'left-end'

Position

position: 'absolute' | 'fixed'

Tooltip CSS position property.

TIP

If a Tooltip's parent has position fixed, use position: 'fixed'.

API Reference

Props

prop	type	default
text	string
arrow	boolean
delay	number
padding	number
placement	'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'	'top'
position	'absolute' | 'fixed'	'absolute'
offset	number	5
trigger	'click' | 'hover'	'hover'

Configuration options

Tooltip's configuration options allow to overwrite some Tooltip props' default values and may be overwritten under the tooltip root-level configuration option.

tooltip.<option>	type	default	global
arrow	boolean	false
offset	(arror: boolean) => number	arrow => arrow ? 2 : 5
placement	'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'	'top'