Tooltip

Whether you want to display additional information, provide hints, or offer interactive content, Tooltip has got you covered.

Features

1. Content Interaction: Support for hover and copy actions within the content popover, making it interactive and engaging.
2. Delay Configuration: Configure delay options for showing/hiding the tooltip, providing flexibility in timing.
3. Automatic Positioning: Automatically positions the tooltip for optimal visibility, ensuring content remains accessible.
4. Focus Trap: Implements focus trapping to keep focus within the tooltip when it's open, enhancing accessibility.
5. Click Outside Interaction: Close the popover when clicking outside the tooltip, offering intuitive behavior.
6. Keyboard Operations: Supports keyboard operations, including using the escape key to close the tooltip, improving accessibility.
7. Dark Mode: Offers a dark mode for a better visual experience, catering to different design preferences.
8. Resize/Scroll Positioning (Pending): Planned implementation for resizing, scrolling, and dynamic positioning, further enhancing versatility.

Usages

Import TooltipModule or TooltipDirective, TooltipComponent based on your need (standalone components or legacy).

import {TooltipModule, TooltipComponent, TooltipDirective} from 'clr-lift'

Basic Tooltip

<a href="javascript:void(0)" cllTooltip="This is our cllTooltip text">Basic Tooltip 1</a>

<a href="javascript:void(0)" cllTooltip cllTooltipContent="This is our cllTooltip text" [cllTooltipHideDelay]="500" [cllTooltipWidth]="100">
  Basic Tooltip 2
</a>

<a href="javascript:void(0)" cllTooltip cllTooltipContent="">Empty Content Will NOT Show Tooltip</a>

In this usage, you can simply add a tooltip by specifying the content directly or through attribute directive cllTooltipContent. Additional configurations such as hide delay and width can be customized as per your requirements.

Tooltip with Dynamic Content

<a
  href="javascript:void(0)"
  cllTooltip
  [cllTooltipContent]="ref"
  [cllTooltipContentContext]="{$implicit: 'TemplateRef Example', value: '❤️'}"
  [cllTooltipWidth]="350"
  [cllTooltipPosition]="'tooltip-top-right'"
>
  Ref
</a>
<ng-template #ref let-data let-value="value">
  {{ 'A great tooltip:' }} {{ data }} {{ value }}
  <cll-callout> You can also put a component inside ng-template </cll-callout>
</ng-template>

In this scenario, Tooltip accepts dynamic content provided through Angular templates. You can specify templates using ng-template and bind them to the tooltip component for dynamic display. This allows for more interactive and customized tooltips.

Tooltip with Component Reference

@Component({
  template: `
  <a
    *ngIf="alertComponent"
    href="javascript:void(0)"
    cllTooltip
    [cllTooltipContent]="alertComponent"
    [cllTooltipWidth]="600"
    [cllTooltipHideDelay]="1000"
  >
    Component Ref
  </a>
  `
})

export class DemoComponent {
  private appRef = inject(ApplicationRef);

  alertComponent?: ComponentRef<AlertComponent>;

  ngOnInit() {
    const environmentInjector = this.appRef.injector;
    this.alertComponent = createComponent(AlertComponent, { environmentInjector });
    this.alertComponent.setInput('content', 'I am from alert component');
    this.alertComponentRef.setInput('alertType', 'success');
  }
}

In this usage, Tooltip can display content from Angular components dynamically. It demonstrates how you can create and inject components into the tooltip, providing endless possibilities for displaying rich and interactive content.

Tooltip with Component Type

<!-- SpinnerComponent is the component class, not the component instance. -->
<a href="javascript:void(0)" cllTooltip [cllTooltipContent]="SpinnerComponent" [cllTooltipHideDelay]="1000">
  Component Type Example
</a>

If you have a component without any inputs, e.g. just display some data. You can pass the component Type.