This page lists directives related to spotlights.

Spotlight pointers

<walkthrough-spotlight-pointer spotlightId="SPOTLIGHT_ID">LINK_TEXT</walkthrough-spotlight-pointer>
<walkthrough-spotlight-pointer cssSelector="CSS_SELECTOR">LINK_TEXT</walkthrough-spotlight-pointer>

Creates a link that highlights the specified UI element in Google Cloud console when clicked.

You can spotlight an element on the page in one of two ways:

Spotlight/instrumentation ID
Using the spotlightId parameter, specify a DOM element's instrumentation-id or spotlight-id property value to select the element.
CSS selector
For elements without a spotlight or instrumentation ID, use the cssSelector parameter with a CSS selector to select the element.

Only one of these parameters is required. If both are provided, spotlightId is used.

Multiple elements can be selected using a comma as a delimiter. All matching elements are highlighted, with the first focused and scrolled into view.

For spotlights in Cloud Shell Editor, refer to Cloud Shell Editor spotlights.


Parameter Type Description
spotlightId List Spotlight/instrumentation IDs to spotlight, separated by comma.
cssSelector List CSS selectors to spotlight, separated by comma.
title String (Optional) The tooltip to show when the user hovers their mouse cursor over the spotlight link.

Here's a list of spotlight/instrumentation IDs you can use:

Spotlight/instrumentation ID Highlighted element
console-nav-menu The console navigation menu.
devshell-activate-button The button to open Cloud Shell.