{% load ui_assets ui_classes ui_props %}
{% ui_require_asset "trellis:tooltip" %}

<c-vars side="bottom"
        align="center"
        offset="0"
        gap="8"
        open_delay="400"
        close_delay="150"
        color="neutral"
        variant="surface"
        surface="2"
        elevation="4"
        disabled="False"
        class="" />
{% ui_class "ui.tooltip" "root" class=class as root_class %}
<div x-data="UiTooltip"
      x-bind="root"
      data-ui-tooltip-root
      data-side="{{ side }}"
      data-align="{{ align }}"
      data-offset="{{ offset }}"
      data-gap="{{ gap }}"
      data-open-delay="{{ open_delay }}"
      data-close-delay="{{ close_delay }}"
      data-color="{{ color }}"
      data-variant="{{ variant }}"
      data-surface="{{ surface }}"
      data-elevation="{{ elevation }}"
      {% if disabled|ui_bool %}data-disabled="true"{% endif %}
      data-class="{{ class }}"
      class="{{ root_class }}"
      {% if "x-ui-transition:opening" not in attrs %}x-ui-transition:opening="$transition.data.instant ? null : $ui.motion($transition).animate('[data-ui-tooltip-content]', $ui.motion.presets.popover.in).role('feedback').play()"{% endif %}
      {% if "x-ui-transition:closing" not in attrs %}x-ui-transition:closing="$transition.data.instant ? null : $ui.motion($transition).animate('[data-ui-tooltip-content]', $ui.motion.presets.popover.out).role('feedback').play()"{% endif %}
      {{ attrs }}>
    {{ slot }}
</div>