mirror of
https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend
synced 2025-12-28 22:42:11 +01:00
dd598d100c
feat(tooltip): add tooltip component and directive with customizable triggers Introduce a new tooltip library for Angular applications, featuring a flexible tooltip component that supports various trigger events (click, hover, focus) and customizable content. Includes necessary styles, tests, and documentation for usage and configuration. Ref: #4992
143 lines
2.9 KiB
Markdown
143 lines
2.9 KiB
Markdown
# UI Tooltip Library
|
|
|
|
A flexible tooltip library for Angular applications, built with Angular CDK overlays.
|
|
|
|
## Features
|
|
|
|
- Tooltips position themselves automatically (right, left, bottom, top)
|
|
- Support for basic text and template content
|
|
- Customizable trigger events (click, hover, focus)
|
|
- Optional title support
|
|
- Customizable appearance
|
|
|
|
## Installation
|
|
|
|
The tooltip library is part of the UI components library. No additional installation is required beyond the standard project setup.
|
|
|
|
## Basic Usage
|
|
|
|
```typescript
|
|
import { Component } from '@angular/core';
|
|
import { TooltipDirective } from '@isa/ui/tooltip';
|
|
|
|
@Component({
|
|
selector: 'app-my-component',
|
|
standalone: true,
|
|
imports: [TooltipDirective],
|
|
template: `
|
|
<button
|
|
uiTooltip
|
|
[content]="'This is a simple tooltip'">
|
|
Hover me
|
|
</button>
|
|
`
|
|
})
|
|
export class MyComponent {}
|
|
```
|
|
|
|
## Options
|
|
|
|
The tooltip directive supports the following inputs:
|
|
|
|
| Input | Type | Default | Description |
|
|
|-------|------|---------|-------------|
|
|
| content | string ⎮ TemplateRef<unknown> | (required) | The content to display in the tooltip. Can be a string or a template reference. |
|
|
| title | string | undefined | Optional title to display at the top of the tooltip |
|
|
| triggerOn | TooltipTrigger[] | ['click', 'hover', 'focus'] | Events that trigger the tooltip to appear |
|
|
|
|
## Examples
|
|
|
|
### Simple Text Tooltip
|
|
|
|
```html
|
|
<button
|
|
uiTooltip
|
|
[content]="'Simple text tooltip'">
|
|
Hover me
|
|
</button>
|
|
```
|
|
|
|
### Tooltip with Title
|
|
|
|
```html
|
|
<button
|
|
uiTooltip
|
|
[title]="'Tooltip Title'"
|
|
[content]="'This tooltip has a title'">
|
|
Hover me
|
|
</button>
|
|
```
|
|
|
|
### Template Content
|
|
|
|
```html
|
|
<button
|
|
uiTooltip
|
|
[content]="templateRef">
|
|
Hover for complex content
|
|
</button>
|
|
|
|
<ng-template #templateRef>
|
|
<div>
|
|
<strong>Rich content</strong>
|
|
<p>With multiple elements</p>
|
|
<ul>
|
|
<li>Item 1</li>
|
|
<li>Item 2</li>
|
|
</ul>
|
|
</div>
|
|
</ng-template>
|
|
```
|
|
|
|
### Custom Triggers
|
|
|
|
```html
|
|
<!-- Click-only tooltip -->
|
|
<button
|
|
uiTooltip
|
|
[content]="'Click to see this tooltip'"
|
|
[triggerOn]="['click']">
|
|
Click me
|
|
</button>
|
|
|
|
<!-- Hover and focus tooltip -->
|
|
<button
|
|
uiTooltip
|
|
[content]="'Hover or focus to see this tooltip'"
|
|
[triggerOn]="['hover', 'focus']">
|
|
Hover or focus me
|
|
</button>
|
|
```
|
|
|
|
## Positioning
|
|
|
|
The tooltip will automatically position itself in the following order of preference, based on available space:
|
|
|
|
1. Right (default/preferred)
|
|
2. Left
|
|
3. Bottom
|
|
4. Top
|
|
|
|
The tooltip maintains a distance of 1.5rem (24px) from the triggering element.
|
|
|
|
## Styling
|
|
|
|
The tooltip uses default styling that can be customized by overriding CSS variables or targeting the tooltip classes directly in your global stylesheet.
|
|
|
|
```css
|
|
/* Example of customizing tooltip appearance */
|
|
.ui-tooltip {
|
|
background-color: #333;
|
|
color: white;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.ui-tooltip-title {
|
|
color: #ffcc00;
|
|
}
|
|
```
|
|
|
|
## Running unit tests
|
|
|
|
Run `nx test ui-tooltip` to execute the unit tests.
|