{% set tooltipId = id|default('tooltip-' ~ random()) %}
<span class="tooltip-anchor {{ class|default('') }}" x-data="{ visible: false }" @mouseenter="visible = true" @mouseleave="visible = false" @focusin="visible = true" @focusout="visible = false">
    <span aria-describedby="{{ tooltipId }}">{{ content|raw }}</span>
    <span id="{{ tooltipId }}" class="tooltip-content" role="tooltip" x-show="visible" x-cloak x-transition.opacity.duration.120ms>{{ text }}</span>
</span>