@qrsln/tooltip NPM

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>