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'sinstrumentation-id
orspotlight-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.
Parameters
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. |