Spotlights

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.