เวลาเราทำ UI บนเว็บไซต์ เรามักใช้ Icon เพื่อแสดง Action หรือ Status ของรายการที่เราแสดงอยู่ แต่บางครั้งใช้แค่ icon อย่างเดียวอาจไม่สื่อความหมายที่ชัดเจนให้แก่ผู้ใช้งาน บางทีเราก็อยากให้มี tooltip โชว์ขึ้นมาตอนที่ผู้ใช้เอาเมาส์มาวางบน icon ไว้ แต่ tooltip ที่แสดง default จาก browser ก็ไม่ค่อยสวยเท่าไหร่แล้วจัดสไตล์ก็ไม่ได้ด้วย ในบทความนี้เราจะมาแสดงเทคนิค implement tooltip ง่าย ๆ ที่เราปรับไสตล์ให้เข้ากับ theme เว็บไซต์เราได้ ด้วย tailwindcss ให้ดูกัน

โดยปกติแล้วเราสามารถเพิ่ม Tooltip ให้กับ html tag โดยเพิ่ม attributes title แบบนี้

<div title="ดาวน์โหลด">
    <!-- Icon -->
</div>

ทีนี้ถ้าเราอยากจัดสไตล์ tooltip เป็นของเราเอง เราอาจเริ่มจาก step ดังนี้

<div><!-- Icon --></div>
<div>ดาวน์โหลด</div>  

แน่นอนว่าถ้าเราเพิ่ม div ขึ้นมาอีกอัน ก็จะแสดงข้อความต่อท้าย Icon ของเราอยู่แล้ว

เราสามารถจัดตำแหน่งข้อความ tooltip ของเราได้ โดยสร้าง div ที่มีคลาส relative ขึ้นมาเป็น wrapper คลุม icon และ tooltip ของเรา แล้วใน div ที่เป็น tooltip เพิ่มคลาส absolute เพื่อจัด position และตำแหน่งอ้างอิงกับ div ที่เป็น wrapper

<div class="relative">
    <div><!-- Icon --></div>
    <div class="absolute z-10 top-2/3 left-4">ดาวน์โหลด</div>  
</div>

ใช้ tailwindcss คลาส Top / Right / Bottom / Left เพื่อจัดตำแหน่ง tooltip ที่เหมาะกับการใช้งานของเราได้

แน่นอนว่าเราสามารถใช้ css class เพื่อ style tooltip ให้สวยงามแบบที่เราต้องการได้แล้ว เช่น

<div class="relative">
    <div><!-- Icon --></div>
    <div class="... bg-gray-dark text-white rounded px-2 py-1 text-sm whitespace-nowrap">ดาวน์โหลด</div>  
</div>

ถัดมาเราสามารถกำหนดให้ tooltip ซ่อนไว้ก่อน แล้วแสดงเฉพาะเวลาที่เราเอาเมาส์มา hover ที่ wrapper ของเรา โดยเพิ่มคลาส group ที่ wrapper และ group-hover ที่ div tooltip

<div class="group ...">
    <div><!-- Icon --></div>
    <div class="hidden group-hover:block ...">ดาวน์โหลด</div>  
</div>

แต่โดย default แล้ว display utilities ใน tailwind จะมาพร้อมกับ responsive variants เท่านั้น ถ้าเราต้องการใช้ group-hover:block เราต้องเพิ่ม config ใน tailwind.config.js ดังนี้

// tailwind.config.js

module.exports = {
    variants: {
        extend: {
            display: ['group-hover'],
        }
    },
    // config อื่น ๆ
}

HTML และ CSS class ที่เขียนทั้งหมดเป็นตามนี้

<div class="group relative">
    <div><!-- Icon --></div>
    <div 
        class="hidden group-hover:block absolute z-10 top-2/3 left-4 bg-gray-dark text-white rounded px-2 py-1 text-sm whitespace-nowrap">
        ดาวน์โหลด
    </div>
</div>

ด้วย html เพียงเท่านี้เราสามารถได้ tooltip ที่จัดสไตล์และตำแหน่งแบบที่เราต้องการได้

*Bonus - Extract เป็น Component

แต่เพื่อให้เอา code ไปใช้ได้ง่ายขึ้น ใน framework ที่เราใช้เราสามารถ Refactor ไปเป็น component ได้ เช่น ถ้าเราใช้ Laravel อาจแตกไปเป็น blade component ได้แบบนี้

<!-- views/components/tooltip.blade.php -->
@props(['title'])

<div class="group relative">

    {{ $slot }}

    <div
        class="hidden group-hover:block absolute z-10 top-2/3 left-4 bg-gray-dark text-white rounded px-2 py-1 text-sm ">
        {{ $title }}
    </div>
</div>

จากตัวอย่างเราสร้าง blade-X component ขึ้นมาโดยรับ prop ที่ชื่อว่า title เพื่อแสดงเป็น tooltip ของเรา โดย icon หรือปุ่มหรือข้อความที่เราต้องการให้มี tooltip จะเอามาแสดงใน slot

เราสามารถเรียกใช้ component ได้แบบนี้

<x-tooltip title="ดาวน์โหลด">
    <!-- Icon / button / ข้อความ -->
</x-tooltip>

เรียบง่าย Clean Code โค๊ด !!