15 May

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

tooltip

บทความนี้เป็นเทคนิคง่ายๆ ในการทำ 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

 

Leave a Reply

Your email address will not be published. Required fields are marked *