- CSS ย่อมาจาก Cascading Style Sheet คือภาษาที่ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร HTML โดยที่ CSS กำหนดกฏเกณฑ์ในการระบุรูปแบบ
- Tooltip คือ กล่องข้อความ สำหรับอธิบายรายละเอียดของข้อความ ที่มีขนาดสั้นหรือคลุมเครือยากต่อความเข้าใจ เป็นการซ้อนไว้ต้องนำเมาส์ไปชี้ถึงแสดง
Tooltips Class (คลาสของทูลทิปส์)
- w3-tooltip : The tooltip element โดย w3-tooltips จะแสดงข้อความที่ซ้อนในบรรทัดเดียวกันเลย
w3-text : The tooltip text โดยถ้าใช้ร่วมกับ w3-tooltips จะทำให้ข้อความน่าสนใจมาขึ้น
ตัวอย่างโค้ด
- รูปตัวอย่างก่อนนำเมาส์ไปชี้ของโค้ดรูปแบบที่ 1,2 และ 3
- รูปแบบที่ 1
โค้ด: เลือกทั้งหมด
<!DOCTYPE html> <html> <title>CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <div class="w3-container"> <p class="w3-tooltip">Nena <span style="position:absolute;left:0;bottom:18px" class="w3-text w3-tag">is very beatiful</span> is rich.</p> </div> </body> </html>
- ผลลัพธ์รูปแบบที่ 1
- รูปแบบที่ 2
โค้ด: เลือกทั้งหมด
<!DOCTYPE html> <html> <title>CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <div class="w3-container"> <br> <p class="w3-tooltip">Nena <span style="position:absolute;left:0;bottom:18px" class="w3-text w3-tag w3-xlarge">is very beatiful</span> is rich.</p> </div> </body> </html>
- ผลลัพธ์รูปแบบที่ 2
- รูปแบบที่ 3
โค้ด: เลือกทั้งหมด
<!DOCTYPE html> <html> <title>CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <div class="w3-container"> <br> <p class="w3-tooltip">Nena <span style="position:absolute;left:0;bottom:18px" class="w3-text w3-tag w3-small">is very beatiful</span> is rich.</p> </div> </body> </html>
- ผลลัพธ์รูปแบบที่ 3
- รูปตัวอย่างก่อนนำเมาส์ไปชี้ของโค้ดรูปแบบที่ 4 และ 5
- รูปแบบที่ 4
โค้ด: เลือกทั้งหมด
<!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <div class="w3-container"> <div class="w3-tooltip"> <p class="w3-text">Hello everybody, Today's my birthday. My name's Nena. I like you. </p><br> <img src="11.png" alt="Car" style="width:40%"> </div> </div> </body> </html>
- ผลลัพธ์รูปแบบที่ 4
- รูปแบบที่ 5
โค้ด: เลือกทั้งหมด
<!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <body> <div class="w3-container"> <div class="w3-tooltip"> <img src="11.png" alt="Car" style="width:40%"><br> <p class="w3-text">Hello everybody, Today's my birthday. My name's Nena. I like you. </p> </div> </div> </body> </html>
- ผลลัพธ์รูปแบบที่ 5
----------------------------------------------------------------------------------------------------------------------------------------------------------------
_____________________________________________________________________________________________
บทความนี้เเป็นบทความที่จัดทำขึ้นเพื่อเนะนำเครื่องมือช่วยสำหรับนักพัฒนา CSS,HTML ซึ่งเป็นความรู้พื้นฐานในการพัฒนา PHP ต่อไป เเละขอเเนะนำความรู้ที่เกี่ยวข้องกับ HTML , CSS โดยสามารถศึกษาได้จากบทเรียน PHP ได้ที่นี่ เพื่อเพิ่มความเข้าใจในการใช้งานเครื่องมือต่างๆ ค่ะ
_____________________________________________________________________________________________
----------------------------------------------------------------------------------------------------------------------------------------------------------------