Tooltip

A fully customizable tooltip component with a sleek, modern design, supporting flexible arrow positioning for top, bottom, left, and right placements.

Props

Prop	Type	Default	Description
value	string	''	Text of the tooltip.
class	string	''	When present, it adds a custom class to the tooltip
theme	string	light	Tooltip theme: light or dark.
position	string	'top'	Tooltip position. Options: top, bottom, left , right.

Example component with all props

<Button 
  label="Top" 
  v-tooltip.top="{ 
    value: 'This is a tooltip', 
    class: topTooltip 
  }"
></Button>

Theme

Light

Tooltip appears with light background and dark text

<Button 
  variant="secondary" 
  label="Light Theme" 
  v-tooltip.top="{ 
    value: 'This is a tooltip',
    class: topTooltip 
  }"
></Button>
<Button 
  label="Dark Theme"
  v-tooltip.top="{
    value: 'This is a tooltip', 
    class: darkTopTooltip 
  }"
></Button>

Position

Top

The top tooltips is used for the information above the element for quick guidance.

<Button 
  variant="upgrade" 
  label="Top" 
  v-tooltip.top="{ 
    value: 'This is a tooltip',
    class: topTooltip 
  }"
></Button>

Left

The left tooltips is used for the extra information to the left of the element.

<Button 
  variant="upgrade" 
  label="Left" 
  v-tooltip.left="{ 
    value: 'This is a tooltip', 
    class: leftTooltip 
  }"
></Button>

Right

The right tooltips is used for the extra information to the right of the element.

<Button 
  variant="upgrade" 
  label="Right" 
  v-tooltip.right="{ 
    value: 'This is a tooltip', 
    class: rightTooltip 
  }"
></Button>

Bottom

The bottom tooltips is used for the extra information below the element.

<Button 
  variant="upgrade" 
  label="Bottom" 
  v-tooltip.bottom="{ 
    value: 'This is a tooltip', 
    class: bottomTooltip 
  }"
></Button>

#Title with Supporting text

Title & Text

Tooltip appears with light background and dark text

<Button 
  label="Supportive Tooltip" 
  v-tooltip.top="{ 
    value : supportiveTooltipContext, 
    escape: false , 
    class : supportiveTooltip 
  }"
></Button>