typescript 55 lines · 7 steps

Building a tooltip directive in Angular

A standalone Angular directive that shows a template in a CDK overlay on hover and cleans up after itself.

Explained by highlit

Angular Intermediate directives cdk-overlay hover-interaction template-portal lifecycle-cleanup

1import { Directive, ElementRef, HostListener, Input, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core';
2import { Overlay, OverlayRef } from '@angular/cdk/overlay';
3import { TemplatePortal } from '@angular/cdk/portal';
4 
5@Directive({
selector: '[appTooltip]',
standalone: true,
8})
9export class TooltipDirective implements OnDestroy {
@Input('appTooltip') content!: TemplateRef<unknown>;
11 
private overlayRef?: OverlayRef;
13 
constructor(
  private readonly elementRef: ElementRef<HTMLElement>,
  private readonly overlay: Overlay,
  private readonly viewContainerRef: ViewContainerRef,
) {}
19 
@HostListener('mouseenter')
show(): void {
  if (this.overlayRef?.hasAttached()) {
    return;
  }
25 
  const positionStrategy = this.overlay
    .position()
    .flexibleConnectedTo(this.elementRef)
    .withPositions([
      {
        originX: 'center',
        originY: 'top',
        overlayX: 'center',
        overlayY: 'bottom',
        offsetY: -8,
      },
    ]);
38 
  this.overlayRef = this.overlay.create({
    positionStrategy,
    scrollStrategy: this.overlay.scrollStrategies.reposition(),
  });
43 
  this.overlayRef.attach(new TemplatePortal(this.content, this.viewContainerRef));
}
46 
@HostListener('mouseleave')
hide(): void {
  this.overlayRef?.detach();
}
51 
ngOnDestroy(): void {
  this.overlayRef?.dispose();
}
55}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1The CDK overlay API lets you render content in a floating layer positioned relative to a host element.
2Guarding against an already-attached overlay avoids stacking duplicate tooltips on repeated hover events.
3Any imperatively created overlay must be disposed in ngOnDestroy to prevent leaking DOM and subscriptions.

Related explainers

typescript

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import localeFrExtra from '@angular/common/locales/extra/fr';
import localeDe from '@angular/common/locales/de';

Locale-aware bootstrapping in Angular

i18n localization dependency-injection

Intermediate 8 steps

typescript

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import * as Joi from 'joi';

Validating env config at boot in NestJS

configuration schema-validation environment-variables

Intermediate 8 steps

typescript

import { Inject, Injectable, Logger } from '@nestjs/common';
import { CACHE_MANAGER } from '@nestjs/cache-manager';
import { Cache } from 'cache-manager';
import { InjectRepository } from '@nestjs/typeorm';

A cache-aside country lookup in NestJS

cache-aside dependency-injection batch-lookup

Intermediate 8 steps

typescript

import { Injectable, effect, signal, computed } from '@angular/core';
 
interface Preferences {
  theme: 'light' | 'dark';

A signal-based preferences store in Angular

signals state-management persistence

Intermediate 7 steps

typescript

import { useEffect, useState } from "react";
 
interface Section {
  id: string;

Building a scroll-spy hook in React

custom-hooks intersectionobserver dom-observation

Intermediate 8 steps

typescript

import { Injectable, Scope, Inject, NotFoundException } from '@nestjs/common';
import { REQUEST } from '@nestjs/core';
import { Request } from 'express';
import { DataSource } from 'typeorm';