Tooltip
Adds descriptive text to a short piece of inline content. Pass the wrapped markup through content.
{% capture help_label %}<button type="button" class="c-button c-button--ghost c-button--md">Help</button>{% endcapture %}
{% include components/tooltip.html text="More information" content=help_label %}
More information about this setting.
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
text |
string | — | Tooltip text |
content |
string | — | Inline HTML that triggers the tooltip |
position |
string | top |
top, bottom, left, right |
class |
string | — | Additional CSS classes |
Keep essential instructions available in visible text as well; tooltips supplement rather than replace labels.