คำแนะนำเครื่องมือการแสดงผลข้อความ (หรือเนื้อหาอื่น ๆ ) เมื่อคุณเลื่อนเมาส์ไปที่องค์ประกอบ HTML
Inline Tooltip ข้อความ
เลื่อนเมาส์ไปที่ประโยคด้านล่าง!
ลอนดอน 9 ล้านเป็นเมืองหลวงของประเทศอังกฤษ
ชั้น W3-คำแนะนำเครื่องมือกำหนดองค์ประกอบ HTML เพื่อเลื่อนเมาส์ไป (ภาชนะเคล็ดลับเครื่องมือ)
ชั้น W3 ข้อความกำหนดข้อความคำแนะนำเครื่องมือ:
ตัวอย่าง
<p class="w3-tooltip">London
<span
class="w3-text">9 million</span>
is the capital city of
England</p> ลองตัวเอง» แท็ก Tooltip Inline
เลื่อนเมาส์ไปที่ประโยคด้านล่าง!
ลอนดอน 9 ล้านเป็นเมืองหลวงของประเทศอังกฤษ
ชั้น W3-คำแนะนำเครื่องมือกำหนดองค์ประกอบ HTML เพื่อเลื่อนเมาส์ไป (ภาชนะเคล็ดลับเครื่องมือ)
ชั้น W3 ข้อความกำหนดข้อความคำแนะนำเครื่องมือ:
ตัวอย่าง
<p class="w3-tooltip">London
<span
class="w3-text w3-tag">9 million</span>
is the capital
city of England</p> ลองตัวเอง» เคล็ดลับที่มีขนาดใหญ่
เลื่อนเมาส์ไปที่ภาพนี้จะเห็นผล:
รถเป็นล้อยาง, ตัวขับเคลื่อนยานยนต์ใช้สำหรับการขนส่ง คำจำกัดความของคำส่วนใหญ่ระบุว่ารถยนต์มักจะมีสี่ล้อ. (วิกิพีเดีย)
ชั้น W3-คำแนะนำเครื่องมือกำหนดองค์ประกอบ HTML เพื่อเลื่อนเมาส์ไป (ภาชนะเคล็ดลับเครื่องมือ)
ชั้น W3 ข้อความกำหนดข้อความคำแนะนำเครื่องมือ:
ตัวอย่าง (ข้อความก่อนภาพ)
<div class="w3-tooltip">
<p
class="w3-text">A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars typically have
four wheels.(Wikipedia)</p>
<img src="img_car.jpg"
alt="Car" style="width:100%">
</div> ลองตัวเอง» ตัวอย่าง (ข้อความหลังจากที่ภาพ)
<div class="w3-tooltip">
<img src="img_car.jpg"
alt="Car" style="width:100%">
<p
class="w3-text">A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars typically have
four wheels.(Wikipedia)</p>
</div> ลองตัวเอง» เคล็ดลับแอบโซลูท
หากคุณต้องการคำแนะนำเครื่องมือที่จะปรากฏในตำแหน่งที่แน่นอนตำแหน่งข้อความคำแนะนำเครื่องมือ (W3 ข้อความ):
ตัวอย่าง
<p class="w3-tooltip">London is the capital city
of England.
<span style="position:absolute;left:0;bottom:18px"
class="w3-text w3-tag">9million</span></p> ลองตัวเอง» สีเคล็ดลับ
หากคุณต้องการคำแนะนำเครื่องมือสีใช้เรียน W3 สี:
เคล็ดลับที่โค้งมน
หากคุณต้องการคำแนะนำเครื่องมือที่โค้งมนใช้เรียน W3 รอบนี้:
เคล็ดลับเล็ก ๆ
หากคุณต้องการคำแนะนำเครื่องมือขนาดเล็กใช้คลาส W3 ขนาดเล็ก:
เคล็ดลับเล็ก ๆ
หากคุณต้องการคำแนะนำเครื่องมือเล็ก ๆ ใช้คลาส W3 เล็ก ๆ :
เคล็ดลับที่มีขนาดใหญ่
หากคุณต้องการคำแนะนำเครื่องมือขนาดใหญ่ใช้เรียน W3-ขนาดใหญ่: