: แชร์ประสบการณ์การเขียนโปรแกรมฉบับผู้เริ่มต้น เมื่อจำเป็นต้องสร้าง Tool-tip ขึ้นมาใช้เอง
>> ปัญหา : เพราะ Google table chart ที่ใช้อยู่ไม่ได้เตรียม Tool-tip text เอาไว้ให้ จึงต้องหาทางแก้ไขด้วยวิธีการอื่น
คำตอบที่ได้ : เมื่อค้นจากเว็บจึงทราบว่าสามารถสร้าง Tool-tip text ขึ้นมาใช้งานเองได้ อาจใช้ไลบรารีใดๆที่ชอบหรือตามแต่วิธีการที่เหมาะสมเท่าที่ความรู้ในขณะนั้นจะสามารถ
>> ภาพต่อไปนี้แสดงให้เห็นตัวอย่างการสร้าง Tool-tip text อย่างง่ายที่สุดขึ้นมาด้วยแท็ก div จำนวนสองแท็ก (แท็กอื่นก็ได้นะครับ) แท็ก div แรกจะห่อหุ่มแท็ก div ที่สองเอาไว้ภายใน โดยมีรายละเอียดสำคัญดังนี้
- แท็ก div แรก (ด้านนอกสุด) จะบรรจุ text ที่แสดงตามปกติ
- แท็ก div ที่สอง (ด้านใน) จะบรรจุ text ที่ต้องการให้แสดงในลักษณะของ Tool-tip (กล่องข้อความที่กำหนดสีพื้นหลังเป็นสีชมพู) เมื่อเกิดเหตุการณ์เม้าส์ hover (เอาเม้าส์ไปวางไว้เหนือข้อความ Hover Event)
- หัวใจอยู่ที่แท็ก div ที่สองต้องกำหนดค่า opacity เป็น 0 เพื่อให้โปรงแสงจนมองไม่เห็น รอคอยจนกว่าจะเกิดเหตุการณ์เม้าส์ hover จึงกำหนดค่า opacity ใหม่เป็น 1 (ค่านี้อยู่ระห่าง 0 ถึง 1) ซึ่งจะกลายเป็นทึบแสง เราจึงมองเห็นได้ครับ
*** หมายเหตุ หากรูปเล็กไปมองไม่เห็นโค้ด ให้คลิกขวาที่รูปแล้วเลือก 'เปิดรูปภาพในแท็บใหม่' แล้วขยายภาพเอานะครับ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น