Tooltip

The Tooltip property provides additional context or guidance when users hover over, focus on, or interact with a component. It enhances usability by clarifying the function or purpose of the element without cluttering the interface.

1. Basic Properties

• Title
  The text content displayed inside the tooltip.
  Example: "Enter your username"
• Placement
  Determines where the tooltip appears in relation to the component. Supported options:
  • bottom → Default position, tooltip appears below the component.
  • bottom-start → Bottom left aligned.
  • bottom-end → Bottom right aligned.
  • top → Appears above the component.
  • top-start → Top left aligned.
  • top-end → Top right aligned.
  • left → Appears to the left of the component.
  • left-start → Left aligned to the top.
  • left-end → Left aligned to the bottom.
  • right → Appears to the right of the component.
  • right-start → Right aligned to the top.
  • right-end → Right aligned to the bottom.

2. Usage Scenarios

• Form fields → Provide hints for input requirements (e.g., “Password must contain at least 8 characters”).
• Action buttons → Explain what the button does (e.g., “Delete permanently”).
• Icons → Clarify the meaning of symbolic icons (e.g., info, warning, edit).
• Disabled elements → Indicate why a field or button is not available.

3. Best Practices

• Keep tooltip text short and clear.
• Use tooltips for clarification, not as the main source of instructions.
• Prefer consistent placement (commonly top or bottom).
• Ensure accessibility by supporting keyboard and screen reader users.

✅ The Tooltip property is a powerful way to add clarity and guidance to UI components, improving user experience without overwhelming the interface.