ฟอรั่ม | ล่าสุดการพัฒนาเว็บบทเรียน
×

Bootstrap เกี่ยวกับการสอน

BS บ้าน BS เริ่ม BS กินกัน BS การเรียงพิมพ์ BS ตาราง BS ภาพ BS jumbotron BS Wells BS การแจ้งเตือน BS ปุ่ม BS กลุ่มปุ่ม BS Glyphicons BS ป้าย / ป้าย BS แถบความคืบหน้า BS การให้เลขหน้า BS Pager BS กลุ่มรายการ BS แผง BS เมนูแบบเลื่อนลง BS Collapse BS แท็บ / ยา BS Navbar BS ฟอร์ม BS Inputs BS Inputs 2 BS Input Sizing BS ม้าหมุน BS เป็นกิริยาช่วย BS เคล็ดลับ BS Popover BS Scrollspy BS ติด

Bootstrap ระบบกริด

BS ระบบกริด BS ซ้อนกัน / แนวนอน BS ตารางขนาดเล็ก BS ตารางขนาดกลาง BS ตารางขนาดใหญ่ BS ตัวอย่างตาราง

Bootstrap ธีม

BS แม่แบบ BS กระทู้ "Simply Me" BS กระทู้ "Company" BS กระทู้ "Band"

Bootstrap Exam

BS ทดสอบ

Bootstrap CSS Ref

CSS การเรียงพิมพ์ CSS ปุ่ม CSS ฟอร์ม CSS ผู้ช่วย CSS ภาพ CSS ตาราง CSS เมนูแบบเลื่อนลง CSS Navs Glyphicons

Bootstrap JS Ref

JS ติด JS เตือนภัย JS ปุ่ม JS Carousel JS Collapse JS เลื่อนลง JS Modal JS Popover JS Scrollspy JS แถบ JS เคล็ดลับ

 

Bootstrap JS เคล็ดลับ


JS Tooltip (tooltip.js)

ปลั๊กอินเคล็ดลับที่มีขนาดเล็กกล่องป๊อปอัพที่ปรากฏขึ้นเมื่อผู้ใช้เลื่อนตัวชี้เมาส์ไปที่องค์ประกอบ

สำหรับการสอนเกี่ยวกับคำแนะนำเครื่องมืออ่านของเรา Bootstrap Tooltip การสอน


ผ่าน data-* แอตทริบิวต์

data-toggle="tooltip" เปิดใช้งานคำแนะนำเครื่องมือ

title แอตทริบิวต์ระบุข้อความที่ควรจะแสดงภายในคำแนะนำเครื่องมือ

ตัวอย่าง

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
ลองตัวเอง»

ผ่านทางจาวาสคริปต์

คำแนะนำเครื่องมือปลั๊กอินไม่ CSS อย่างเดียวและดังนั้นจึงต้องเริ่มต้นกับ jQuery: เลือกองค์ประกอบที่ระบุและเรียก tooltip() วิธีการ

ตัวอย่าง

// Select all elements with data-toggle="tooltips" in the document
$('[data-toggle="tooltip"]').tooltip();

// Select a specified element
$('#myTooltip').tooltip();
ลองตัวเอง»

ตัวเลือกเคล็ดลับ

ตัวเลือกที่สามารถส่งผ่านข้อมูลผ่านทางคุณลักษณะหรือ JavaScript สำหรับแอตทริบิวต์ข้อมูลผนวกชื่อตัวเลือกในการ data- ในขณะที่ data-placement=""

ชื่อ ชนิด ค่าเริ่มต้น ลักษณะ ลองมัน
animationbooleantrue

ระบุว่าเพื่อเพิ่มผลการเปลี่ยนแปลง CSS จางหายเมื่อการแสดงและซ่อนคำแนะนำเครื่องมือ

  • true - เพิ่มผลซีดจาง
  • false - อย่าเพิ่มผลซีดจาง
ลองมัน
ภาชนะ สตริงหรือเท็จแบบบูล เท็จ ผนวกคำแนะนำเครื่องมือที่จะเป็นองค์ประกอบที่เฉพาะเจาะจง
ตัวอย่าง: ภาชนะ: 'body'
ลองมัน
delaynumber, or object0 ระบุจำนวนมิลลิวินาทีก็จะใช้เวลาในการแสดงและซ่อนคำแนะนำเครื่องมือ

เพื่อระบุความล่าช้าในการแสดงและอีกคนหนึ่งในการซ่อนที่ใช้โครงสร้างวัตถุ:

delay: {show: 500, hide: 100} - ซึ่งจะใช้เวลา 500 มิลลิวินาทีเพื่อแสดง tooltip แต่เพียง 100 มิลลิวินาทีที่จะซ่อนมัน
ลองมัน
htmlboolean false ระบุว่าจะยอมรับแท็ก HTML ในคำแนะนำเครื่องมือ:
  • true - ยอมรับแท็ก
  • false - อย่ายอมรับแท็ก
หมายเหตุ: HTML จะต้องแทรกอยู่ในแอตทริบิวต์ชื่อ (หรือใช้ตัวเลือกชื่อ)

เมื่อตั้งค่าเป็นเท็จ (ค่าเริ่มต้น) jQuery's text() วิธีการจะนำไปใช้ การใช้งานนี้ถ้าคุณมีความกังวลใจเกี่ยวกับการโจมตี XSS
ลองมัน
placementstring"top" ระบุตำแหน่งคำแนะนำเครื่องมือ ค่าที่เป็นไปได้:

  • "top" เคล็ดลับเครื่องมือ - ด้านบน
  • "bottom" - เคล็ดลับด้านล่าง
  • "left" เคล็ดลับเครื่องมือ - ด้านซ้าย
  • "right" เคล็ดลับเครื่องมือ - ด้านขวา
  • "auto" - ช่วยให้เบราว์เซอร์ตัดสินใจตำแหน่งของคำแนะนำเครื่องมือที่ ตัวอย่างเช่นถ้าค่าเป็น "auto left" , คำแนะนำจะแสดงที่ด้านซ้ายเมื่อเป็นไปได้มิฉะนั้นทางด้านขวา หากมีค่าเป็น "auto bottom" , คำแนะนำจะแสดงที่ด้านล่างเมื่อเป็นไปได้มิฉะนั้นด้านบน
ลองมัน
selectorstring, or the boolean falsefalse เพิ่มคำแนะนำเครื่องมือที่จะระบุตัวเลือก ลองมัน
templatestring  ฐาน HTML เพื่อใช้เมื่อสร้างคำแนะนำเครื่องมือ

ชื่อคำแนะนำเครื่องมือจะถูกแทรกลงในองค์ประกอบที่มีระดับ .tooltip-inner สภาพแวดล้อมที่มีระดับ .tooltip-arrow จะกลายเป็นลูกศรคำแนะนำเครื่องมือของ

องค์ประกอบที่ห่อหุ้มชั้นนอกสุดควรมี .tooltip ระดับ
titlestring"" ระบุข้อความที่ควรจะแสดงภายในคำแนะนำเครื่องมือ ลองมัน
triggerstring"hover focus" ระบุว่าคำแนะนำเครื่องมือจะถูกเรียก ค่าที่เป็นไปได้:

  • "click" - เรียกคำแนะนำเครื่องมือด้วยการคลิก
  • "hover" - เรียกคำแนะนำเครื่องมือในการเลื่อน
  • "focus" - เรียกคำแนะนำเครื่องมือเมื่อได้รับโฟกัส (โดยแท็บหรือคลิก .eg)
  • "manual" - เรียกคำแนะนำเครื่องมือด้วยตนเอง
Tip: การส่งผ่านค่าหลายแยกด้วยช่องว่าง
ลองมัน
viewportstring, or object{selector: "body", padding: 0} ช่วยให้คำแนะนำเครื่องมือภายในขอบเขตขององค์ประกอบนี้

ตัวอย่าง: viewport: '#viewport' หรือ {selector: '#viewport', padding: 0}

เคล็ดลับวิธีการ

ตารางต่อไปนี้แสดงวิธีการแนะนำเครื่องมือที่มีอยู่ทั้งหมด

วิธี ลักษณะ ลองมัน
.tooltip( options ) เปิดใช้งานคำแนะนำเครื่องมือที่มีตัวเลือก ดูตัวเลือกข้างต้นสำหรับค่าที่ถูกต้อง ลองมัน
.tooltip("show") แสดงให้เห็นถึงคำแนะนำเครื่องมือ ลองมัน
.tooltip("hide") ซ่อนคำแนะนำเครื่องมือ ลองมัน
.tooltip("toggle") สลับคำแนะนำเครื่องมือ ลองมัน
.tooltip("destroy") ซ่อนและทำลายคำแนะนำเครื่องมือ ลองมัน

เหตุการณ์เคล็ดลับ

ตารางต่อไปนี้แสดงเหตุการณ์คำแนะนำเครื่องมือที่มีอยู่ทั้งหมด

เหตุการณ์ ลักษณะ ลองมัน
show.bs.tooltip เกิดขึ้นเมื่อคำแนะนำเครื่องมือเป็นเรื่องเกี่ยวกับที่จะแสดง ลองมัน
shown.bs.tooltip เกิดขึ้นเมื่อคำแนะนำเครื่องมือจะแสดงอย่างเต็มที่ (หลังจากการเปลี่ยน CSS ได้เสร็จสิ้น) ลองมัน
hide.bs.tooltip เกิดขึ้นเมื่อคำแนะนำเครื่องมือที่เกี่ยวกับการถูกซ่อนไว้ ลองมัน
hidden.bs.tooltip เกิดขึ้นเมื่อคำแนะนำเครื่องมือจะถูกซ่อนไว้อย่างเต็มที่ (หลังจากการเปลี่ยน CSS ได้เสร็จสิ้น) ลองมัน

ตัวอย่าง

ตัวอย่าง

เคล็ดลับการออกแบบที่กำหนดเอง

ใช้ CSS ในการปรับแต่งรูปลักษณ์ของคำแนะนำเครื่องมือนี้:

ตัวอย่าง

/* Tooltip */
.test + .tooltip > .tooltip-inner {
    background-color: #73AD21;
    color: #FFFFFF;
    border: 1px solid green;
    padding: 15px;
    font-size: 20px;
}

/* Tooltip on top */
.test + .tooltip.top > .tooltip-arrow {
    border-top: 5px solid green;
}

/* Tooltip on bottom */
.test + .tooltip.bottom > .tooltip-arrow {
    border-bottom: 5px solid blue;
}

/* Tooltip on left */
.test + .tooltip.left > .tooltip-arrow {
    border-left: 5px solid red;
}

/* Tooltip on right */
.test + .tooltip.right > .tooltip-arrow {
    border-right: 5px solid black;
}
ลองตัวเอง»