Developing Web Components

Chapter 6. Constructing an Overlay

Jason Strimpel

Anytime you see a tooltip, dialog, drop-down menu, etc. on the Web, an overlay is likely driving the component. This is especially likely if reusability was a design concern or if the requirements called for more than CSS alone could provide.

An overlay is a widget that provides basic functionality for positioning an element relative to the document or another element. You can think of an overlay as a new window that is part of the document. It is an element in the DOM: a blank canvas that can contain any content that you want. This lower-level widget can then be extended, mixed in, or applied to another widget to create a widget with which a user interacts (such as our dialog widget).

An overlay should have two primary functions. First, it should be able to position an element relative to the viewport. This is useful for directing a user’s focus to a critical item such as an error. Second, the overlay should be able to position an element relative to another element in the document. This functionality allows a developer to bring attention to a specific item on the page—e.g., a tooltip—or position related items, such as a drop-down for constructing UI controls.

This chapter will discuss how to construct an overlay. This overlay will be used to add more functionality to the dialog widget.

Defining an API

Before getting into the details of the overlay code, let’s stub out an API to help us determine the necessary supporting private ...