# gds-coachmark

**Class**: `GdsCoachmark`

**Tag**: `<gds-coachmark>`


## Properties

| Name | Type | Default | Description |
|------|------|---------|-------------|
| `placement` | `Placement` | `-` | The placement of the popover relative to the trigger. Accepts any of the placements supported by Floating UI. |
| `overlappedBy` | `string[]` | `-` | The coachmark will be hidden when overlapped by the list of provided elements (selectors). |
| `target` | `string[]` | `-` | List of selectors pointing to the targeted element. Ex. for a target inside a ShadowDOM: ["some-component", "shadowRoot", "target-element"]. |
| `label` | `string` | `-` | The accessible label of the coachmark. |
| `computeVisibility` | `(     self: GdsCoachmark,     target: HTMLElement,     computedVisibility: boolean,   ) => boolean` | `-` | A callback that can be used to set the visibility of the coachmark based on your criteria.  The default computed visibility, based on visibility and overlap of the target element, is supplied as the third argument. |
| `targetElement` | `HTMLElement \| undefined` | `-` | The resolved targeted element (readonly) |
| `_isVisible` | `boolean` | `-` |  |
| `_preventClose` | `boolean` | `-` |  |
| `syncFirstRender` | `boolean` | `-` | Force the element to perform a synchronous first render and apply style expression properties in `connectedCallback`.  This guarantees that the child DOM always remains projected in DOM, since the element will attach the shadowRoot and run the first render pass in the same event loop cycle, and that declarative layout will be applied once slotted DOM is projected.  Note: This will cause the first render pass to be blocking. Use sparingly and only when necessary, such as when the element needs to be measured synchronously after being added to the DOM. |


## Events

| Name | Type | Description |
|------|------|-------------|
| `gds-ui-state` | `CustomEvent<any>` | dispatched when the tooltip is about to be closed. Can be cancelled to prevent closing. |


## Slots

| Name | Description |
|------|-------------|
| `(default)` | placeholder for the content of the tooltip. |


## Methods

### `setPreventClose(preventClose: boolean): void`

**Parameters:**

- `preventClose`: `boolean`