Etat Pur Design System

Template Tooltips 

<div class="tooltips flex" x-data="{show: false}" :class="show ? 'tooltips-show' : ''">

        <div class="relative text-black" x-ref="tooltipsButton" @mouseenter="show = true" @mouseleave="show = false" @click="show = !show">
            <span class="transition-colors text-neutral-500 hover:text-black">
                <svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" stroke="currentColor" stroke-width="1.5" fill="none" />

                </svg> </span>

            <div class="tooltips-content p-2 z-10 max-w-60 w-max" x-show="show" x-anchor.="$refs.tooltipsButton" role="tooltip" aria-hidden="true">
                <div class="relative rounded-lg border p-3 bg-black border-black/16">
                    <span class="text-body-xs text-white">

                    </span>
                </div>
            </div>
        </div>
    </div>
 
{% block button %}
    <div class="tooltips flex"
         x-data="{show: false}"
         :class="show ? 'tooltips-show' : ''"
    >

        <div class="relative {{ color == 'light' ? 'text-white' : 'text-black' }}"
             x-ref="tooltipsButton" @mouseenter="show = true" @mouseleave="show = false" @click="show = !show">
            <span class="transition-colors {{ color == 'light' ? 'text-neutral-100 hover:text-white' : 'text-neutral-500 hover:text-black' }}">
                {% render "@icons-heroicons--information-circle-outline" with {
                    height: '16',
                    width: '16',
                } %}
            </span>

            <div class="tooltips-content p-2 z-10 max-w-60 w-max"
                 x-show="show"
                 x-anchor.{{ position }}="$refs.tooltipsButton"
                 role="tooltip"
                 aria-hidden="true"
            >
                <div class="relative rounded-lg border p-3 {{ color == 'light' ? 'bg-white border-white/16' : 'bg-black border-black/16' }}">
                    <span class="text-body-xs {{ color == 'light' ? 'text-black' : 'text-white' }}">
                    {{ text }}
                </span>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
 
/* No context defined. */

No notes defined.