# Contextual Help

Add help to a page by placing a topic attribute on the relevant heading or label:

```html
<div class="card-header table-dark text-light" data-help-topic="system_nfc">NFC Enable</div>
```

`custom.js` automatically adds the help button and opens the responsive sidebar. It also observes
dynamically loaded page content, so no page-specific JavaScript call is required.

Each topic is a JSON file in `topics/`:

```json
{
  "title": "Topic title",
  "images": [
    {
      "src": "images/example.png",
      "alt": "Description of the image",
      "caption": "Optional caption"
    }
  ],
  "text": "<p>Trusted contextual help HTML.</p>"
}
```

Image paths may be absolute URLs, root-relative URLs, or paths relative to `functions/help/`.

Use `{{ROOT_URL}}` inside topic HTML when linking to a core application endpoint. The help renderer
replaces it with the current tenant's root URL.
