Tooltip

Displays informative text when users hover over, focus on, or tap an element.

<c-ui.tooltip>
    <button class="btn">Hover Me</button>
    <c-slot name="content">
        This is a tooltip!
    </c-slot>
</c-ui.tooltip>

{% cotton ui.tooltip %}
    <button class="btn">Hover Me</button>
    {% cotton:slot content %}
        This is a tooltip!
    {% endcotton:slot %}
{% endcotton %}

Positions

Control the tooltip position using the position attribute.

<c-ui.tooltip position="top">
    <button class="btn">Top</button>
    <c-slot name="content">Top Tooltip</c-slot>
</c-ui.tooltip>

<c-ui.tooltip position="bottom">
    <button class="btn">Bottom</button>
    <c-slot name="content">Bottom Tooltip</c-slot>
</c-ui.tooltip>

<c-ui.tooltip position="left">
    <button class="btn">Left</button>
    <c-slot name="content">Left Tooltip</c-slot>
</c-ui.tooltip>

<c-ui.tooltip position="right">
    <button class="btn">Right</button>
    <c-slot name="content">Right Tooltip</c-slot>
</c-ui.tooltip>

{% cotton ui.tooltip position="top" %}
    <button class="btn">Top</button>
    {% cotton:slot content %}Top Tooltip{% endcotton:slot %}
{% endcotton %}

{% cotton ui.tooltip position="bottom" %}
    <button class="btn">Bottom</button>
    {% cotton:slot content %}Bottom Tooltip{% endcotton:slot %}
{% endcotton %}

{% cotton ui.tooltip position="left" %}
    <button class="btn">Left</button>
    {% cotton:slot content %}Left Tooltip{% endcotton:slot %}
{% endcotton %}

{% cotton ui.tooltip position="right" %}
    <button class="btn">Right</button>
    {% cotton:slot content %}Right Tooltip{% endcotton:slot %}
{% endcotton %}

Offset

Adjust the spacing between the trigger and the tooltip using the :offset dynamic attribute (value in pixels).

<c-ui.tooltip :offset="0">
    <button class="btn">Offset 0</button>
    <c-slot name="content">No gap</c-slot>
</c-ui.tooltip>

<c-ui.tooltip :offset="12">
    <button class="btn">Offset 12</button>
    <c-slot name="content">Large gap</c-slot>
</c-ui.tooltip>

{% cotton ui.tooltip :offset="0" %}
    <button class="btn">Offset 0</button>
    {% cotton:slot content %}No gap{% endcotton:slot %}
{% endcotton %}

{% cotton ui.tooltip :offset="12" %}
    <button class="btn">Offset 12</button>
    {% cotton:slot content %}Large gap{% endcotton:slot %}
{% endcotton %}

HTML Content

You can include HTML markup within the content slot.

<c-ui.tooltip>
    <button class="btn">HTML</button>
    <c-slot name="content">
        <strong>Important:</strong> <em>Check details!</em>
    </c-slot>
</c-ui.tooltip>

{% cotton ui.tooltip %}
    <button class="btn">HTML</button>
    {% cotton:slot content %}
        <strong>Important:</strong> <em>Check details!</em>
    {% endcotton:slot %}
{% endcotton %}

Sizes & Arrow

Use size (xs through 2xl, default md) to scale the tooltip. An arrow pointing at the trigger shows by default and follows whichever side the tooltip flips to. Pass :arrow="False" to hide it.

<c-ui.tooltip size="sm">
    <button class="btn">Small</button>
    <c-slot name="content">Small tooltip</c-slot>
</c-ui.tooltip>

<c-ui.tooltip>
    <button class="btn">Default</button>
    <c-slot name="content">Default tooltip</c-slot>
</c-ui.tooltip>

{# the arrow shows by default #}
<c-ui.tooltip size="lg">
    <button class="btn">Large</button>
    <c-slot name="content">Large tooltip</c-slot>
</c-ui.tooltip>

{# hide it with :arrow="False" #}
<c-ui.tooltip :arrow="False">
    <button class="btn">No arrow</button>
    <c-slot name="content">No arrow</c-slot>
</c-ui.tooltip>

{% cotton ui.tooltip size="sm" %}
    <button class="btn">Small</button>
    {% cotton:slot content %}Small tooltip{% endcotton:slot %}
{% endcotton %}

{% cotton ui.tooltip %}
    <button class="btn">Default</button>
    {% cotton:slot content %}Default tooltip{% endcotton:slot %}
{% endcotton %}

{# the arrow shows by default #}
{% cotton ui.tooltip size="lg" %}
    <button class="btn">Large</button>
    {% cotton:slot content %}Large tooltip{% endcotton:slot %}
{% endcotton %}

{# hide it with :arrow="False" #}
{% cotton ui.tooltip :arrow="False" %}
    <button class="btn">No arrow</button>
    {% cotton:slot content %}No arrow{% endcotton:slot %}
{% endcotton %}

Pinned Open

Add open to render the tooltip statically, always visible without hovering. Handy for callouts, onboarding hints, labelling a value or building demos.

<c-ui.tooltip content="Always visible" open arrow>
    <c-ui.button>Pinned</c-ui.button>
</c-ui.tooltip>

{% cotton ui.tooltip content="Always visible" open arrow %}
    {% cotton ui.button %}Pinned{% endcotton %}
{% endcotton %}

Responsive positioning

The tooltip flips to the opposite side and clamps within the viewport so it never runs off screen. Drag the handles to resize the preview and watch it reposition.

Reference

Props

Name	Description	Type	Options	Default
`position`	The position of the tooltip relative to the trigger element.	str	`topbottomleftright`	top
`:offset`	The gap between the trigger and the tooltip in pixels.	int	Any integer	4
`size`	Padding and text size of the tooltip.	str	`xssmmdlgxl2xl`	md
`:arrow`	Show a small pointer (tail) on the edge facing the trigger. Shown by default; set to False to hide.	bool	`TrueFalse`	True
`:open`	Render the tooltip permanently open (static) instead of showing it on hover or focus.	bool	`TrueFalse`	False

Slots

Name	Description	Type	Options	Default
`slot (default)`	The element that triggers the tooltip (e.g., a button, icon, or text).	—	—	Required
`content`	The content (text or HTML) to display inside the tooltip.	—	—	Required