Tooltip

Tooltip Basic

{% component "Tooltip" text="Default tooltip" placement="top" %}
                <a href="#">inline links</a>
            {% endcomponent %}

Preview:

inline links

Tooltip Placement Top

{% component "Tooltip" text="Tooltip on top" placement="top" %}
                {% component "Button" variant="secondary" %}Top{% endcomponent %}
            {% endcomponent %}

Preview:

Tooltip Placement Right

{% component "Tooltip" text="Tooltip on right" placement="right" %}
                {% component "Button" variant="secondary" %}Right{% endcomponent %}
            {% endcomponent %}

Preview:

Tooltip Placement Bottom

{% component "Tooltip" text="Tooltip on bottom" placement="bottom" %}
                {% component "Button" variant="secondary" %}Bottom{% endcomponent %}
            {% endcomponent %}

Preview:

Tooltip Placement Left

{% component "Tooltip" text="Tooltip on left" placement="left" %}
                {% component "Button" variant="secondary" %}Left{% endcomponent %}
            {% endcomponent %}

Preview:

Tooltip With Button

{% component "Tooltip" text="This top tooltip is themed via CSS variables." placement="top" %}
                {% component "Button" variant="secondary" attrs:data-bs-custom-class="custom-tooltip" %}
                    Custom tooltip
                {% endcomponent %}
            {% endcomponent %}

Preview:

Tooltip Disabled Button Wrapper

{% component "Tooltip" text="Disabled tooltip" placement="top" %}
                <span class="d-inline-block" tabindex="0">
                    {% component "Button" variant="primary" type="button" disabled=True %}Disabled button{% endcomponent %}
                </span>
            {% endcomponent %}

Preview: