npm package: @qrsln/tooltip
Description: Tooltip
Author: Qrsln
Latest version: 24.8.6-beta.0

## Tooltip

[![Support](https://img.shields.io/badge/Patreon-white?style=for-the-badge)](https://www.patreon.com/qrsln)
[![npm](https://img.shields.io/npm/v/@qrsln/tooltip?style=for-the-badge)](https://www.npmjs.com/package/@qrsln/tooltip)
[![npm](https://img.shields.io/npm/dm/@qrsln/tooltip?style=for-the-badge)](https://npmcharts.com/compare/@qrsln/tooltip?minimal=true)

> For Angular

[![Demo](https://img.shields.io/badge/Demo-blue?style=for-the-badge)](https://krsln.github.io/Showcase/Libraries/Tooltip)
[![Readme](https://img.shields.io/badge/ReadMe-white?style=for-the-badge)](https://github.com/krsln/Showcase/blob/master/Docs/Libraries/Tooltip)

#### Properties

| Name               | Description                                                              |
|--------------------|--------------------------------------------------------------------------|
| qlTooltip="..."    | content                                                                  |
| [rounded:boolean]  | rounded corners                                                          |
| [outline:boolean]  | outline style                                                            |
| [placement:string] | top right bottom left                                                    |
| [theme:string]     | primary secondary success info warning danger light (default) dark night |
| [duration:number]  | 500ms is default                                                         |

#### app.module.ts

```typescript
import {TooltipDirective} from '@qrsln/tooltip';

@Component({
  imports: [RouterOutlet, TooltipDirective],
})
export class AppComponent {}
```  

#### Usage

```html

<div class="Border Rounded P-4 MY-2">
  <button class="Btn Btn-outline-dark ME-2" qlTooltip="Tooltip on Top" placement="top" [outline]="true" [duration]="500"
          [rounded]="true" [theme]="'primary'"> Primary
  </button>
  <button class="Btn Btn-outline-dark ME-2" qlTooltip="Tooltip on Top" placement="top" [outline]="true" [duration]="500"
          [rounded]="true" [theme]="'secondary'"> Secondary
  </button>
  <button class="Btn Btn-outline-dark ME-2" qlTooltip="Tooltip on Top" placement="top" [outline]="true" [duration]="500"
          [rounded]="true" [theme]="'success'"> Success
  </button>
  <button class="Btn Btn-outline-dark ME-2" qlTooltip="Tooltip on Top" placement="top" [outline]="true" [duration]="500"
          [rounded]="true" [theme]="'info'"> Info
  </button>
  <button class="Btn Btn-outline-dark ME-2" qlTooltip="Tooltip on Top" placement="top" [outline]="true" [duration]="500"
          [rounded]="true" [theme]="'warning'"> Warning
  </button>
  <button class="Btn Btn-outline-dark ME-2" qlTooltip="Tooltip on Top" placement="top" [outline]="true" [duration]="500"
          [rounded]="true" [theme]="'danger'"> Danger
  </button>
  <button class="Btn Btn-outline-dark ME-2" qlTooltip="Tooltip on Top" placement="top" [outline]="true" [duration]="500"
          [rounded]="true" [theme]="'light'"> Light
  </button>
  <button class="Btn Btn-outline-dark ME-2" qlTooltip="Tooltip on Top" placement="top" [outline]="true" [duration]="500"
          [rounded]="true" [theme]="'dark'"> Dark
  </button>
  <button class="Btn Btn-outline-dark ME-2" qlTooltip="Tooltip on Top" placement="top" [outline]="true" [duration]="500"
          [rounded]="true" [theme]="'night'"> Night
  </button>
</div>
``` 

#### Screenshots

![](https://github.com/krsln/NgLootBox/raw/master/Docs/Images/Tooltip/Tooltip_2022-01-31.png "Tooltip")
![](https://github.com/krsln/NgLootBox/raw/master/Docs/Images/Tooltip/Tooltip_Themes_2022-01-31.png "Tooltip Themes")