# UIB TooltipModule

## Prequisites

Add the `TooltipModule` module to your module imports:

```TS
import { TooltipModule } from '@uib/angular';

@NgModule({
  imports: [
    // ...
    TooltipModule,
    // ...
  ],
})
// ...
```

## UibTooltip

### Inputs

- `uibTooltip`: tooltip content (string, TemplateRef or ComponentRef)
- `uibTooltipDisabled`: disables the tooltip
- `uibTooltipOptions`: tooltip options

### Available TooltipOptions

- `alwaysShown`: tooltip will always be shown except it gets disabled (default: false)
- `placement`: tooltip placement (default: 'top')
- `trigger`: tooltip trigger (default: 'mouseenter')
- `delayIn`: tooltip delay until shown in ms (default: null)
- `delayOut`: tooltip delay until hidden in ms (default: null)
- `interactive`: enable user interaction with the tooltip (default: false)
- `lazy`: create tooltip instance only if tooltip host is in view (default: false)
- `ignoreLineBreaks`: if set to true line breaks are ignored (default: false)

> You can override those options globally via `TOOLTIP_OPTIONS` token provider

### Examples

Basic tooltip with HTML content

```HTML
<p uibTooltip="HTML <b>tooltip</b> content">
  I have a tooltip
</p>
```

Tooltip using ng-template as content

```HTML
<ng-template #contentTpl>
    Template <b>tooltip</b> content
</ng-template>
<p [uibTooltip]="contentTpl">
  I have a tooltip
</p>
```

Nested tooltips

```HTML
<ng-template #contentTpl>
    I have a <b uibTooltip="Nested tooltip">tooltip</b>
</ng-template>
<p [uibTooltip]="contentTpl" [uibTooltipOptions]="{ interactive: true, trigger: 'click' }">
  I have a tooltip
</p>
```