Introduction

In this tutorial, you'll build a simple tooltip element that supports lazy creation, ensuring fast initial page rendering.

Tooltips are a great way to show hints that provide context for the main content and interface. For example, a button might have a tooltip showing what happens when you click it, or an icon might have a tooltip that displays an info card.

Since tooltips are not displayed by default and require an interaction to render, they are a good candidate for render optimization. By creating the tooltip lazily when needed, you can make sure to keep initial page rendering as fast as possible.

Here's a preview of the simple-tooltip element. Take a look at my-content. in the code editor. This shows one way to use simple-tooltip. Look at the preview output and move your pointer over the interface to see how the tooltip is displayed.

Here's what you'll do in the upcoming steps:

• Focus on the basics: triggering the tooltip and positioning it.
• Animate the tooltip when it's shown and hidden.
• Ensure great performance by creating the tooltip lazily based on user interaction.
• Create a Lit directive to declaratively create high performance, lazy tooltips.

You're going to be a tooltip expert!