Tip CSS : การทำ Tooltips (ทูลทิปส์) โดยแสดงข้อความที่ซ้อนให้อยู่บรรทัดเดียวกัน แบบง่ายๆ

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

User avatar
pprn
PHP Super Hero Member
PHP Super Hero Member
Posts: 565
Joined: 02/07/2018 10:45 am

Tip CSS : การทำ Tooltips (ทูลทิปส์) โดยแสดงข้อความที่ซ้อนให้อยู่บรรทัดเดียวกัน แบบง่ายๆ

Post by pprn » 12/07/2018 11:50 am

  • CSS ย่อมาจาก Cascading Style Sheet คือภาษาที่ใช้เป็นส่วนของการจัดรูปแบบการแสดงผลเอกสาร HTML โดยที่ CSS กำหนดกฏเกณฑ์ในการระบุรูปแบบ
หรือ "Style" ของเนื้อหาในเอกสาร อันได้แก่ สีของข้อความ สีพื้นหลัง ประเภทตัวอักษร และการจัดวางข้อความ
  • Tooltip คือ กล่องข้อความ สำหรับอธิบายรายละเอียดของข้อความ ที่มีขนาดสั้นหรือคลุมเครือยากต่อความเข้าใจ เป็นการซ้อนไว้ต้องนำเมาส์ไปชี้ถึงแสดง
ข้อความได้

Tooltips Class (คลาสของทูลทิปส์)
  • w3-tooltip : The tooltip element โดย w3-tooltips จะแสดงข้อความที่ซ้อนในบรรทัดเดียวกันเลย

    w3-text : The tooltip text โดยถ้าใช้ร่วมกับ w3-tooltips จะทำให้ข้อความน่าสนใจมาขึ้น

ตัวอย่างโค้ด

  • รูปตัวอย่างก่อนนำเมาส์ไปชี้ของโค้ดรูปแบบที่ 1,2,3,4 และ 5
  • before.JPG
    before.JPG (8.79 KiB) Viewed 1455 times
  • รูปแบบที่ 1
  • Code: Select all

    <!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">
    
      <p class="w3-tooltip">Nena <span class="w3-text w3-tag"><b>is very beautiful</b></span> is rich.</p>
    </div>
    
    </body>
    </html> 
  • ผลลัพธ์รูปแบบที่ 1
  • after.png
    after.png (1.49 KiB) Viewed 1455 times
  • รูปแบบที่ 2
  • Code: Select all

    <!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">
    
      <p class="w3-tooltip">Nena <span class="w3-text w3-tag"><b>is very beautiful</b></span> is rich.</p>
    </div>
    
    </body>
    </html> 
  • ผลลัพธ์รูปแบบที่ 2
  • after1.png
    after1.png (2.42 KiB) Viewed 1455 times
  • รูปแบบที่ 2
  • Code: Select all

    <!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 class="w3-text w3-tag w3-red">is very beautiful</span> is rich.</p>
    </div>
    
    </body>
    </html>
  • ผลลัพธ์รูปแบบที่ 3
  • after2.png
    after2.png (2.14 KiB) Viewed 1455 times
  • รูปแบบที่ 4
  • Code: Select all

    <!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 class="w3-text w3-tag w3-round-xlarge">is very beautiful</span> is rich.</p>
    </div>
    
    </body>
    </html> 
  • ผลลัพธ์รูปแบบที่ 4
  • after3.png
    after3.png (2.2 KiB) Viewed 1455 times
  • รูปแบบที่ 5 เมื่อนำเมาส์มาชี้จะค่อยๆแสดงข้อความที่ซ้อนขึ้นมา
  • Code: Select all

    <!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 class="w3-text w3-tag w3-animate-opacity">is very beatiful</span> is rich.</p>
    </div>
    
    </body>
    </html> 
  • ผลลัพธ์รูปแบบที่ 5
  • after4.png
    after4.png (2.06 KiB) Viewed 1455 times

----------------------------------------------------------------------------------------------------------------------------------------------------------------
_____________________________________________________________________________________________
บทความนี้เเป็นบทความที่จัดทำขึ้นเพื่อเนะนำเครื่องมือช่วยสำหรับนักพัฒนา CSS,HTML ซึ่งเป็นความรู้พื้นฐานในการพัฒนา PHP ต่อไป เเละขอเเนะนำความรู้ที่เกี่ยวข้องกับ HTML , CSS โดยสามารถศึกษาได้จากบทเรียน PHP ได้ที่นี่ เพื่อเพิ่มความเข้าใจในการใช้งานเครื่องมือต่างๆ ค่ะ
_____________________________________________________________________________________________

----------------------------------------------------------------------------------------------------------------------------------------------------------------

Return to “CSS Knowledge”

Users browsing this forum: No registered users and 4 guests