[jQuery] - สร้าง bubble popup ด้วย CSS3

bubble popup คือฟองป๊อปอัพ ที่เด้งขึ้นมาเมื่อเรานำเมาส์ไปวางบน ข้อความหรือรูปภาพที่เรากำหนด
ซึ่งภายใน bubble popup อาจมีรายละเอียดสินค้า หรือ ไตเติ้ล หรือรายละเอียดอื่นๆ
ซึ่งสามารถสร้างดึงดูด และสนใจ ให้ให้กับเว็ปเรามากยิ่งขึ้น

สำหรับ bubble popup  แต่งบล็อก ขอนำเสนอ หลักการง่ายๆ จากโค้ด CSS3
ไม่ยุ่งยากใช้งานง่าย แต่สร้างความน่าสนใจให้กับเว็ปไม่น้อยเลยทีเดียว

ขั้นตอนการติดตั้ง bubble popup css3

ขั้นที่ 1 ติดตั้ง CSS

ให้นำโค้ด ไปวางตาม ใน post html หรืออาจจะวางใน Gadget html ก็ได้ครับ

<style type="text/css">
.tooltip{
display: inline;
position: relative;
}
.tooltip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}
.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
</style>

ขั้นที่ 2 ติดตั้ง HTML

ให้นำโค้ด ไปวางตาม ใน post html หรืออาจจะวางใน Gadget html ก็ได้ครับ หลัง CSS ข้อ1

<a href="
url" title="ข้อความที่แสดง" class="tooltip"> <span title="More"><span title="More">ข้อความลิงค์</span> </a>

ตัวอย่าง



ตัวอย่าง bubble popup