A short while ago I published  an article about the integration of Angular CDK in  Nebular — full-featured library for Angular applications we’re developing at Akveo.

During the development, we’ve faced a bunch of interesting puzzles that Angular CDK has helped us to overcome. That’s why I decided to start a series of articles on challenges Angular CDK may aid you with.

To start with, let’s build a tooltip directive. It may sound like a simple component to build, but I believe it is a great showcase of a number of CDK features.

Table of contents

  • Introduction
  • Angular CDK Setup
  • Building blocks
  • Make tooltip floating
  • Overlay Explained
  • Position tooltip properly
  • Results


For starters, let’s take a step back and review what a tooltip component is. The main function of the tooltip is to show some text hint. Let’s take a look at the following example:

And here is the usage example:

 This is an example

#angular #angular cdk

Tooltip with Angular CDK
17.90 GEEK