Tooltip

The Tooltip component provides a flexible way to display additional information, hints, or interactive content. It supports hover and copy actions within the content popover, configurable delay options, automatic positioning, focus trapping for accessibility, click outside interaction, keyboard operations, and dark mode support.

Examples

Example 1: Basic Tooltip

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.

import {TooltipModule} from 'clr-lift';
import {Component} from '@angular/core';

@Component({
  imports: [TooltipModule],
  template: `
    <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>
  `
})
export class BasicTooltipExampleComponent {}

Basic Tooltip 1 Basic Tooltip 2 with Delay 500ms Empty Content Won't Show Tooltip

Example 2: Tooltip with Dynamic Content

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.

import {TooltipModule} from 'clr-lift';
import {Component} from '@angular/core';

@Component({
  imports: [TooltipModule],
  template: `
    <a
      href="javascript:void(0)"
      cllTooltip
      [cllTooltipContent]="content"
      [cllTooltipContentContext]="{$implicit: 'TemplateRef Example', value: '❤️'}"
      [cllTooltipWidth]="350"
      [cllTooltipPosition]="'tooltip-top-right'"
    >
      TemplateRef Example
    </a>
    <ng-template #content 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>
  `
})
export class TemplateRefTooltipExampleComponent {}

TemplateRef Example Hover

cllTooltipContentContext is optional, it's the context that will be passed to the ng-template during creating the embedded view.

Example 3: Tooltip with Component Reference

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.

import {TooltipModule, AlertComponent} from 'clr-lift';
import {Component, ApplicationRef, ComponentRef, createComponent, inject, OnInit} from '@angular/core';

@Component({
  imports: [TooltipModule],
  template: `
    @if (alertComponentRef) {
      <a
        href="javascript:void(0)"
        cllTooltip
        [cllTooltipContent]="alertComponentRef"
        [cllTooltipWidth]="600"
        [cllTooltipHideDelay]="1000"
      >
        Component Ref Example
      </a>
    }
  `
})
export class ComponentRefTooltipExampleComponent implements OnInit {
  private appRef = inject(ApplicationRef);
  alertComponentRef?: ComponentRef<AlertComponent>;

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

Component Ref Example

Example 4: Tooltip with Component Type

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

import {TooltipModule, SpinnerComponent} from 'clr-lift';
import {Component} from '@angular/core';

@Component({
  imports: [TooltipModule],
  template: `
    <!-- SpinnerComponent is the component class, not the component instance. -->
    <a href="javascript:void(0)" cllTooltip [cllTooltipContent]="SpinnerComponent" [cllTooltipHideDelay]="1000">
      Component Type Example
    </a>
  `
})
export class ComponentTypeTooltipExampleComponent {
  SpinnerComponent = SpinnerComponent;
}

Component Type Example

API Reference

TooltipDirective

Directive for adding tooltip functionality to elements.

Inputs

cllTooltip?: string
Simple string content for the tooltip. Can be used as a shorthand for cllTooltipContent.
cllTooltipContent?: string | TemplateRef<any> | ComponentRef<any> | Type<any>
The content to display in the tooltip. Can be a string, template reference, component reference, or component type.
cllTooltipContentContext?: any
Context object to pass to the template when using TemplateRef as content.
cllTooltipWidth?: number
Width of the tooltip in pixels.
cllTooltipPosition?: string
Position of the tooltip relative to the element. Options include 'tooltip-top-right', 'tooltip-top-left', etc.
cllTooltipHideDelay?: number
Delay in milliseconds before hiding the tooltip after mouse leave.
cllTooltipShowDelay?: number
Delay in milliseconds before showing the tooltip on mouse enter.