เทคนิคการสร้าง tooltip โดยใช้ css แบบง่ายๆ

บทความนี้เป็นเทคนิคง่ายๆ ในการทำ tool tip โดยไม่ต้องพึ่ง js หรือ plugin อื่น ใช้เพียงแค่ css และ element ของ html เท่านั้น

เราจะมาเริ่มจาก css ที่เป็นส่วนควบคุมการทำงานและกำหนดลักษณ์สีสันของ tool tip กันครับ

class .tooltip-link ส่วนที่สำคัญจะอยู่ที่  content : attr(title) ส่วนนี้จะเป็นการสร้าง content จาก  attribute ของ element ที่ใช้ class tooltip-links

.tooltip-links {
   position: relative;
}

.tooltip-links:after {
   content: attr(title);
   display: none;  
   padding:5px 25px;
   background:rgb(208,208,208);
   border: 1px solid rgb(192,192,192);
   color:#fff;
   opacity: 0; 
   position: absolute;
   left:0px;
   bottom: 15px;
   min-width:200px;
   z-index:999;
   color:#000;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
}

.tooltip-links:hover:after { 
   display: inline-block;
   opacity: 1; 
    
}

หลังจากได้ในส่วนของ css มาแล้วและจำทำไป implement เข้ากับ html

<a class="tooltip-links" href="#" title="อาณาจักรสุโขทัย ที่เก่าแก่และมีอายุมากกว่า 500 ปี">อาณาจักรสุโขทัย</a>

เรากำหนด class tooltip-links ให้กับ a tag จะเห็นว่าใน a tag นั้นจะมี  attribute title ซึ่งส่วนนี้จะเป็นส่วนแสดงในผลใน tooltip

เรามาดูตัวอย่างกันครับ

Source Code Download