เคล็ดลับ เครื่องมือ W3.CSS
วางเมาส์เหนือประโยคด้านล่าง:
ลอนดอน เป็นเมืองหลวงของอังกฤษ(9 million inhabitants)
ลอนดอน 9 million inhabitants เป็นเมืองหลวงของอังกฤษ
คลาสคำแนะนำเครื่องมือ W3.CSS
W3.CSS มีคลาสคำแนะนำเครื่องมือต่อไปนี้:
| ระดับ | กำหนด |
|---|---|
| w3-เคล็ดลับเครื่องมือ | องค์ประกอบคำแนะนำเครื่องมือ |
| w3-text | ข้อความคำแนะนำเครื่องมือ |
องค์ประกอบคำแนะนำเครื่องมือและข้อความคำแนะนำเครื่องมือ
คำแนะนำเครื่องมือจะแสดงข้อความ (หรือเนื้อหาอื่นๆ) เมื่อคุณวางเมาส์เหนือองค์ประกอบ HTML
คลาสw3-tooltipกำหนดองค์ประกอบที่จะวางเมาส์เหนือ (คอนเทนเนอร์คำแนะนำเครื่องมือ)
คลาสw3-textกำหนดข้อความคำแนะนำเครื่องมือ
วางเมาส์เหนือประโยคด้านล่าง:
ลอนดอน เป็นเมืองหลวงของอังกฤษ(9 million inhabitants)
ตัวอย่าง
<p class="w3-tooltip">London
<span
class="w3-text">(<em>9 million inhabitants</em>)</span>
is the capital of England.</p>
เคล็ดลับเครื่องมือเป็นแท็ก
วางเมาส์เหนือประโยคด้านล่าง:
ลอนดอน 9 million inhabitants เป็นเมืองหลวงของอังกฤษ
ตัวอย่าง
<p class="w3-tooltip">London
<span
class="w3-text w3-tag"><b>9 million inhabitants</b></span>
is the capital of England.</p>
เคล็ดลับเครื่องมือรูปภาพ
วางเมาส์เหนือภาพนี้เพื่อดูเอฟเฟกต์:
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)
ตัวอย่าง (ข้อความก่อนภาพ)
<div class="w3-tooltip">
<p
class="w3-text">A car is a...</p>
<img src="img_car.jpg"
alt="Car">
</div>
ตัวอย่าง (ข้อความหลังภาพ)
<div class="w3-tooltip">
<img src="img_car.jpg"
alt="Car">
<p
class="w3-text">A car is a...</p>
</div>
คำแนะนำเครื่องมือตำแหน่งที่แน่นอน
หากคุณต้องการให้คำแนะนำเครื่องมือปรากฏในตำแหน่งที่แน่นอน ให้วางตำแหน่งข้อความคำแนะนำเครื่องมือด้วย CSS:
ตัวอย่าง
<p class="w3-tooltip">London
<span style="position:absolute;left:0;bottom:18px"
class="w3-text w3-tag">9 million inhabitants</span>
is the capital of England.</p>
คำแนะนำเครื่องมือสี
หากคุณต้องการคำแนะนำเครื่องมือสี ให้ใช้ คลาส สี w3- :
ตัวอย่าง
<span
class="w3-text w3-tag w3-red">9 million inhabitants</span>
เคล็ดลับเครื่องมือโค้งมน
หากคุณต้องการคำแนะนำเครื่องมือแบบโค้งมน ให้ใช้คลาส w3- round :
ตัวอย่าง
<span class="w3-text w3-tag w3-round-xlarge">9 million inhabitants</span>
เคล็ดลับเครื่องมือขนาดเล็ก
หากคุณต้องการคำแนะนำเครื่องมือขนาดเล็ก ให้ใช้ คลาส w3-small :
ตัวอย่าง
<span class="w3-text w3-tag w3-small">9
million inhabitants</span>
เคล็ดลับเครื่องมือจิ๋ว
หากคุณต้องการคำแนะนำเครื่องมือเล็กๆ ให้ใช้ คลาส w3-tiny :
ตัวอย่าง
<span class="w3-text w3-tag w3-tiny">9 million inhabitants</span>
เคล็ดลับเครื่องมือขนาดใหญ่
If you want a large tooltip, use the w3-large classes:
Example
<span class="w3-text w3-tag w3-xlarge">9 million inhabitants</span>
Animated Tooltip
If you want to fade in the tooltip, use the w3-animate-opacity class:
Example
<span class="w3-text w3-tag w3-animate-opacity">9 million inhabitants</span>