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

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

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

ภาพประจำตัวสมาชิก
pprn
PHP Super Member
PHP Super Member
โพสต์: 469
ลงทะเบียนเมื่อ: 02/07/2018 10:45 am

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

โพสต์โดย pprn » 12/07/2018 2:00 pm

    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

    after.png
    after.png (1.49 KiB) เปิดดู 147 ครั้ง

    รูปแบบที่ 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
    after5.png
    after5.png (1.93 KiB) เปิดดู 147 ครั้ง

    รูปแบบที่ 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
    after6.png
    after6.png (3.47 KiB) เปิดดู 147 ครั้ง

    รูปแบบที่ 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
    after7.png
    after7.png (1.66 KiB) เปิดดู 147 ครั้ง

    รูปตัวอย่างก่อนนำเมาส์ไปชี้ของโค้ดรูปแบบที่ 4 และ 5

    11.png
    11.png (4.19 KiB) เปิดดู 147 ครั้ง

    รูปแบบที่ 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
    111.png
    111.png (23.02 KiB) เปิดดู 147 ครั้ง

    รูปแบบที่ 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
    1111.png
    1111.png (22.57 KiB) เปิดดู 147 ครั้ง


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

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

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 2 และ บุคคลทั่วไป 0 ท่าน