Build Angular Tooltip Without Libs - Angular Dynamic Component

Learn how to create Angular tooltip without any libraries. As we want to render our tooltip in body we must learn how to create Angular dynamic component on the fly.

🛠 Need a video editor?

📌 Social

📚 References

🕒 TIMESTAMPS
0:00 Introduction
2:23 Angular tooltip inputs
3:40 Directive usages
6:01 Dynamic component
7:49 Calculating position
10:31 Adding mouse leave

This video is NOT sponsored. Some product links are affiliate links which means if you buy something I'll receive a small commission.

[xidedix]

As always, a very informative tutorial. 👍 FYI ComponentFactoryResolver for dynamic component creation has been deprecated since v13.

[davebudah]

All these tips are making me better everyday. Can you make a tutorial on how we can use Angular/typescript to (1) detect device theme(light or dark) and adapt to that, (2) an option to switch themes manually. I usually just use vanilla javascript and css to achieve this even in my angular projects.

[MrShevrin]

good video, but I couldn't use ComponentFactoryResolver in my project (Abgular 14)
- this class is already depricated

[niteshagarwal]

I have written the same code, but on mouse enter it appends the tooltip component to the body but it is not getting displayed. Please help me out with this.

[ilnurryazhapov]

ComponentFactoryResolver is deprecated...

[gamawfouskotouskaiopoionti]

Would be a great idea, if in the tooltip we could add HTML...
For example an icon and a message🙂

[sashachechoitko]

since v16 ComponentFactoryResolver has been removed

[olehtalanov]

You can use [style.left.px]=“left” to avoid ugly string concat ))