@qrsln/tooltip

Tooltip

For Angular

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

import {TooltipDirective} from '@qrsln/tooltip';

@Component({
  imports: [RouterOutlet, TooltipDirective],
})
export class AppComponent {}

Usage

<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