Tooltips balloon.css project

Tooltips สวยๆ ด้วย Pure CSS กับ Balloon.css

Tooltips เป็นการแสดงคำบรรยาย หรือคำอธิบาย เพิ่มเติมง่ายๆ จากข้อความ ปุ่ม เมนู Link หรือรูปภาพ ก็ตามแต่ ซึ่งจะช่วยทำให้ผู้ใช้ เข้าใจถึงสิ่งที่เรา นำมาแสดง มากยิ่งขึ้น ส่วน Balloon.css เป็น css library ตัวหนึ่งเล็กๆ ที่ช่วยให้เราทำ tool tip ออกมาได้ง่ายมากๆครับ

Simple tooltips made of pure CSS

ถ้าใครที่ใช้ Bootstrap กับ jQuery มาแล้วคงคุ้นเคยกับ Tool Tips รูปแบบของ Javascript ไปกันดีแล้ว ส่วนคนที่ไม่เคยทำ ตามมาดูกันได้เลยครับ วันนี้ลองมารู้จัก tool tips แบบที่สร้างขึ้นมาจาก CSS เพียงอย่างเดียวกันดูบ้างครับ ความสามารถนั้นไม่น้อยหน้าใครเลย ความสวยงามมีแน่นอน แถมยังใช้งานร่วมกับ Font-awesome หรือ Emoji ได้ด้วย เท่ห์ดีจริงๆ

sample

sample

ก่อนอื่นต้องเข้าไปดาวน์โหลดตัว Code ของเค้ามาจาก Git hub กันก่อนนะครับ

Tooltips balloon.css project

balloon.css project

เมื่อเข้าไป Download File css ออกมาแล้ว คราวนี้เรามาตั้ง Project สำหรับทดลองเขียนกันดูครับ โดยผมจะสร้าง Folder ที่ใช้ชื่อว่า Balloon แล้วก็นำเอาเจ้า css นี้ไปวาง พร้อมทั้งพองเพื่อนอย่าง Font-awesome, jquery ซึ่งอันที่จริงไม่ได้จำเป็นนะครับ เพียงแต่ว่า อยากลองให้เต็มที่ เลยจัดมาเท่านั้นเอง

folder

folder

ทีนี้ก็มาสร้าง File ที่ชื่อว่า index.php อันนี้ขอใช้นามสกุล PHP นะครับ เพราะยังไงก็ Run อยู่บน Apache อยู่ดี ทีนี้เรามาสร้างด้วย HTML โครงสร้างธรรมดากันก่อน


<html>
<head>
<title>Balloon css</title>
</head>
<body>

</body>
</html>

จากนั้นเราก็จะมา ดึงตัว CSS เข้ามาใน Page นี้กัน

<link rel="stylesheet" href="css/balloon.css">

จากนั้นก็ไม่ยากนะครับ เราจะเริ่มต้นใช้งานได้ โดยการเรียก attribute data แบบนี้ครับ data-balloon แล้วก็ใส่ข้อความลงไปได้เลย

<h1>Hello Balloon CSS</h1>
<a href="#" data-balloon="Welcome to tutorial">Hover Me!!</a>
setting first

setting first

จะเห็นว่า เพียงเท่านี้ ก็สามารถใช้งานได้แล้ว แต่มันยังขึ้นบังตัวอักษรของเราอยู่ เราสามารถกำหนดตำแหน่ง ได้หลากหลายรูปแบบตามนี้ครับ ข้างบน,ข้างล่าง,ข้างซ้าย,ข้างขวา โดยการใช้ data-balloon-pos เป็นตัวกำหนด

<a href="#" data-balloon="Welcome to tutorial" data-balloon-pos="right">Hover Me!!</a>
position right

position right

ทีนี้เราก็สามารถใส่ Font-awesome เข้าไปได้นะครับ เริ่มจากการเรียก Code ออกมาใช้งานก่อน

<link rel="stylesheet" href="css/font-awesome.css">

จากนั้นก็เข้าไปที่ cheatsheet เพื่อดูค่า unicode ของ icon ที่เราต้องการนะครับ แล้วเอามาใส่แบบนี้ได้เลย

<a href="#" class="fa" data-balloon="&#xf13d; Font-awesome &#xf133;" data-balloon-pos="right">Balloon with font-awesome</a>
with font

with font

เอาละครับ ใครที่อยากใช้งาน คิดว่ามาถึงตรงนี้แล้ว น่าจะไม่ยากละ ผมมีวิดีโอ กับ Code ตัวอย่าง ตามที่ทำไว้ใน video มาให้ดูกันด้วย ใครที่สนใจก็เข้าไปลองดูได้ครับ

Link Source

Link Project