@props(['on'])

<span x-data="{ shown: false, timeout: null }"
    x-init="@this.on('{{ $on }}', () => { clearTimeout(timeout); shown = true; timeout = setTimeout(() => { shown = false }, 7000); })"
    x-show.transition.out.opacity.duration.2500ms="shown" x-transition:leave.opacity.duration.2500ms
    style="display: none;" {{ $attributes->merge(['class' => 'text-sm']) }}>
    {{$slot->isEmpty() ? '?' : $slot}}
</span>