Tooltips

Ready

HTML
View
Context
Info
Notes


        
        <div class="flex justify-center py-24 gap-20">
    <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.top="$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">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
                    </span>
                </div>
            </div>
        </div>
    </div>

    <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.right="$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">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
                    </span>
                </div>
            </div>
        </div>
    </div>

    <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.bottom="$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">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
                    </span>
                </div>
            </div>
        </div>
    </div>

    <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.left="$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">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
                    </span>
                </div>
            </div>
        </div>
    </div>

</div>

<div class="bg-brand flex justify-center py-24 gap-20">
    <div class="tooltips flex" x-data="{show: false}" :class="show ? 'tooltips-show' : ''">

        <div class="relative text-white" x-ref="tooltipsButton" @mouseenter="show = true" @mouseleave="show = false" @click="show = !show">
            <span class="transition-colors text-neutral-100 hover:text-white">
                <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.top="$refs.tooltipsButton" role="tooltip" aria-hidden="true">
                <div class="relative rounded-lg border p-3 bg-white border-white/16">
                    <span class="text-body-xs text-black">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
                    </span>
                </div>
            </div>
        </div>
    </div>

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

        <div class="relative text-white" x-ref="tooltipsButton" @mouseenter="show = true" @mouseleave="show = false" @click="show = !show">
            <span class="transition-colors text-neutral-100 hover:text-white">
                <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.right="$refs.tooltipsButton" role="tooltip" aria-hidden="true">
                <div class="relative rounded-lg border p-3 bg-white border-white/16">
                    <span class="text-body-xs text-black">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
                    </span>
                </div>
            </div>
        </div>
    </div>

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

        <div class="relative text-white" x-ref="tooltipsButton" @mouseenter="show = true" @mouseleave="show = false" @click="show = !show">
            <span class="transition-colors text-neutral-100 hover:text-white">
                <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.bottom="$refs.tooltipsButton" role="tooltip" aria-hidden="true">
                <div class="relative rounded-lg border p-3 bg-white border-white/16">
                    <span class="text-body-xs text-black">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
                    </span>
                </div>
            </div>
        </div>
    </div>

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

        <div class="relative text-white" x-ref="tooltipsButton" @mouseenter="show = true" @mouseleave="show = false" @click="show = !show">
            <span class="transition-colors text-neutral-100 hover:text-white">
                <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.left="$refs.tooltipsButton" role="tooltip" aria-hidden="true">
                <div class="relative rounded-lg border p-3 bg-white border-white/16">
                    <span class="text-body-xs text-black">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
                    </span>
                </div>
            </div>
        </div>
    </div>

</div>


        <div class="flex justify-center py-24 gap-20">
    {% render "@template-tooltips" with {
        color: "dark",
        text: text,
        position: 'top'
    } %}

    {% render "@template-tooltips" with {
        color: "dark",
        text: text,
        position: 'right'
    } %}

    {% render "@template-tooltips" with {
        color: "dark",
        text: text,
        position: 'bottom'
    } %}

    {% render "@template-tooltips" with {
        color: "dark",
        text: text,
        position: 'left'
    } %}
</div>

<div class="bg-brand flex justify-center py-24 gap-20">
    {% render "@template-tooltips" with {
        color: "light",
        text: text,
        position: 'top'
    } %}

    {% render "@template-tooltips" with {
        color: "light",
        text: text,
        position: 'right'
    } %}

    {% render "@template-tooltips" with {
        color: "light",
        text: text,
        position: 'bottom'
    } %}

    {% render "@template-tooltips" with {
        color: "light",
        text: text,
        position: 'left'
    } %}
</div>


        
            
            {
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua"
}

Handle: @tooltips
Preview:
- With layout
- Component only
Filesystem Path: src/components/molecules/tooltips/tooltips.twig
References (1): @template-tooltips

No notes defined.