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