# 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.