เทคนิคทำ Tooltip ด้วย Tailwindcss

23 กุมภาพันธ์ 2564 เวลาอ่าน 7 นาที
เทคนิคทำ Tooltip ด้วย Tailwindcss

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

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

<div title="ดาวน์โหลด">
    <!-- Icon -->
</div>
ตัวอย่าง Tooltip ที่แสดงบน Chrome

ทีนี้ถ้าเราอยากจัดสไตล์ 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>
tooltip แสดงตำแหน่งทับ icon ของเรา

ใช้ 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 โค๊ด !!

Phattarachai Chaimongkol

เกี่ยวกับ phattarachai.dev

ผมอ๊อฟนะครับ เป็นผู้ประกอบการอิสระ ที่ปรึกษาทางด้าน Web Application Development ให้แก่องค์กร ธุรกิจ SME และหน่วยงานราชการ
Web Developer ผู้มีใจรักใน Laravel เป็นพาร์ทเนอร์บริษัท Digital Agency ชั้นนำทางด้าน UX/UI เพื่อพัฒนาโปรเจคให้แก่ลูกค้า ผมช่วยสร้างเครื่องมือทางด้าน Web ที่มีคุณภาพให้ผู้ประกอบการดำเนินธุรกิจได้ง่ายขึ้นใช้งานได้จริง เน้นประสบการณ์ ความชำนาญ ผลงานคุ้มค่าเทียบเท่าจ้างงานกับบริษัทใหญ่ ๆ

ยามว่าง ๆ ชอบเล่นเกมส์บน Steam ครับ

เรื่องที่เกี่ยวข้อง

มีอะไรใหม่ใน Pest V2 บ้าง
23 กุมภาพันธ์ 2564
มีอะไรใหม่ใน Pest V2 บ้าง
วิธีการ fix คอลัมน์ในตาราง html table ให้ชิดซ้ายไว้เวลา Horizontal scrolling เหมือนใน Excel
23 กุมภาพันธ์ 2564
วิธีการ fix คอลัมน์ในตาราง html table ให้ชิดซ้ายไว้เวลา Horizontal scrolling เหมือนใน Excel
วิธีการเคลียร์ไฟล์ Binary Log ใน MySQL
23 กุมภาพันธ์ 2564
วิธีการเคลียร์ไฟล์ Binary Log ใน MySQL