# Tooltip

## Visual Structure

```
ga-tooltip [--{position}-{alignment}]
  └── ga-tooltip__title (optional)
```

## Elements Hierarchy

### Core Block

- `ga-tooltip` - Main container for the tooltip component

### Optional Elements

- `ga-tooltip__title` - Title of the tooltip

### Position Modifiers

- **Top positions**

  - `ga-tooltip--top-start` - Positioned above target, aligned to left
  - `ga-tooltip--top-center` - Positioned above target, centered horizontally
  - `ga-tooltip--top-end` - Positioned above target, aligned to right

- **Bottom positions**

  - `ga-tooltip--bottom-start` - Positioned below target, aligned to left
  - `ga-tooltip--bottom-center` - Positioned below target, centered horizontally
  - `ga-tooltip--bottom-end` - Positioned below target, aligned to right

- **Left positions**

  - `ga-tooltip--left-start` - Positioned to left of target, aligned to top
  - `ga-tooltip--left-center` - Positioned to left of target, centered vertically
  - `ga-tooltip--left-end` - Positioned to left of target, aligned to bottom

- **Right positions**
  - `ga-tooltip--right-start` - Positioned to right of target, aligned to top
  - `ga-tooltip--right-center` - Positioned to right of target, centered vertically
  - `ga-tooltip--right-end` - Positioned to right of target, aligned to bottom

## Examples

### Top Positions

```html
<div class="ga-tooltip ga-tooltip--top-start">Tooltip content</div>
<div class="ga-tooltip ga-tooltip--top-center">Tooltip content</div>
<div class="ga-tooltip ga-tooltip--top-end">Tooltip content</div>
```

### Bottom Positions

```html
<div class="ga-tooltip ga-tooltip--bottom-start">Tooltip content</div>
<div class="ga-tooltip ga-tooltip--bottom-center">Tooltip content</div>
<div class="ga-tooltip ga-tooltip--bottom-end">Tooltip content</div>
```

### Left Positions (With Title)

```html
<div class="ga-tooltip ga-tooltip--left-start">
  <div class="ga-tooltip__title">Tooltip title</div>
  <div>Tooltip content</div>
</div>
<div class="ga-tooltip ga-tooltip--left-center">
  <div class="ga-tooltip__title">Tooltip title</div>
  <div>Tooltip content</div>
</div>
<div class="ga-tooltip ga-tooltip--left-end">
  <div class="ga-tooltip__title">Tooltip title</div>
  <div>Tooltip content</div>
</div>
```

### Right Positions (With Title)

```html
<div class="ga-tooltip ga-tooltip--right-start">
  <div class="ga-tooltip__title">Tooltip title</div>
  <div>Tooltip content</div>
</div>
<div class="ga-tooltip ga-tooltip--right-center">
  <div class="ga-tooltip__title">Tooltip title</div>
  <div>Tooltip content</div>
</div>
<div class="ga-tooltip ga-tooltip--right-end">
  <div class="ga-tooltip__title">Tooltip title</div>
  <div>Tooltip content</div>
</div>
```