Github

Tooltip

Tooltips provide short contextual guidance when users hover or focus an element.

Component variations

Basic Tooltip

Standard button with tooltip on hover

Positions

Tooltip positions relative to the target element

With Long Content

Tooltip with longer descriptive text

Usage Guidelines

Import

Import the tooltip directive in your module or component:

import-tooltip.ts

Copy code

Basic Implementation

Here is a basic example of using the tooltip directive:

tooltip-example.html

Copy code

Positioning Tooltips

Tooltips can be positioned in 8 different locations. Choose positioning based on available space and layout:

tooltip-positions.html

Copy code

API Reference

Directive Inputs

Property
Type
Description
Default
Required
vdTooltip
string
The tooltip text content to display on hover
''
Yes
vdTooltipPosition
'top-center' | 'top-left' | 'top-right' | 'center-left' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
Position of the tooltip relative to the trigger element
'top-center'
No

Best Practices

When to Use

  • Use Tooltip when this pattern clearly supports the user task.
  • Use it to keep similar interactions consistent across the product.

When Not to Use

  • Avoid using Tooltip when a simpler component communicates the same intent.
  • Avoid using it when the pattern introduces unnecessary interaction steps.

Design Guidelines

  • Keep tooltip text concise and informative - ideally under 15 words
  • Use tooltips for explanatory text, not for critical information
  • Position tooltips to avoid obscuring important content
  • Ensure tooltips don't overlap with other interactive elements
  • Use for clarifying icon buttons or abbreviations
  • Automatically shows on hover and hides on mouse leave
  • Choose position based on available screen space
  • Test tooltip content for clarity and brevity
  • Keep labels, helper text, and actions concise and easy to scan.
  • Use VD variants and states consistently for predictable behavior.
  • Ensure keyboard access and clear focus order for accessibility.

Component playground

Customize the tooltip features in this section

example.html

Copy code