{#- chirp-ui: Tooltip macro
    Wraps child, shows tooltip bubble on hover with arrow positioning. Pure CSS.

    Usage:
        from "chirpui/tooltip.html" import tooltip

        {% call tooltip("Copy to clipboard") %}
            <button>Copy</button>
        {% end %}

        {% call tooltip("Below the element", position="bottom") %}
            <span>Hover me</span>
        {% end %}

    Positions: top (default), bottom, left, right
-#}

{% def tooltip(content=none, hint=none, position="top", cls="") %}
{% set tooltip_text = hint if hint is not none else content %}
{% set pos = position if position in ("top", "bottom", "left", "right") else "top" %}
<span class="chirpui-tooltip chirpui-tooltip--{{ pos }}{{ " " ~ cls if cls else "" }}" data-chirpui-tooltip data-tooltip="{{ tooltip_text | e }}">
    {% slot %}
    <span class="chirpui-tooltip__bubble" role="tooltip">{{ tooltip_text }}</span>
</span>
{% end %}