HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Bootstrap 4 บทช่วยสอน

BS4 HOME BS4 เริ่มต้น BS4 คอนเทนเนอร์ BS4 Grid Basic BS4 วิชาการพิมพ์ BS4 สี ตาราง BS4 BS4 รูปภาพ BS4 Jumbotron การแจ้งเตือน BS4 ปุ่ม BS4 กลุ่มปุ่ม BS4 ป้าย BS4 แถบความคืบหน้า BS4 BS4 Spinners BS4 การแบ่งหน้า BS4 รายการกลุ่ม การ์ด BS4 BS4 ดรอปดาวน์ BS4 ยุบ BS4 Navs BS4 Navbar แบบฟอร์ม BS4 อินพุต BS4 กลุ่มอินพุต BS4 BS4 แบบฟอร์มที่กำหนดเอง BS4 ม้าหมุน BS4 โมดอล เคล็ดลับเครื่องมือ BS4 BS4 ป๊อปโอเวอร์ BS4 ขนมปังปิ้ง BS4 Scrollspy BS4 ยูทิลิตี้ BS4 Flex ไอคอน BS4 วัตถุสื่อ BS4 ตัวกรอง BS4

Bootstrap 4 Grid

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

Bootstrap 4 อื่นๆ

เทมเพลตพื้นฐาน BS4 แบบฝึกหัด BS4 แบบทดสอบ BS4

Bootstrap 4 อ้างอิง

ทุกชั้นเรียน JS Alert ปุ่ม JS JS Carousel JS ยุบ JS Dropdown JS Modal JS Popover JS Scrollspy JS แท็บ JS Toasts JS Tooltip


Bootstrap JS Popover

❮ ก่อนหน้า ถัดไป ❯

JS Popover

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

สำหรับบทแนะนำเกี่ยวกับ Popovers โปรดอ่านBootstrap Popover Tutorialของเรา

เปิดใช้งานผ่าน data-* Attributes

เปิดdata-toggle="popover"ใช้งานป๊อปโอเวอร์

แอตทริบิวต์titleระบุข้อความส่วนหัวของป๊อปโอเวอร์

แอตทริบิวต์data-contentระบุข้อความที่ควรแสดงภายในเนื้อหาของป๊อปโอเวอร์

ตัวอย่าง

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>

ผ่าน JavaScript

ป๊อปอัปไม่ใช่ปลั๊กอินเฉพาะ CSS และต้องเริ่มต้นด้วย jQuery: เลือกองค์ประกอบที่ระบุและเรียกใช้ popover()เมธอด

ตัวอย่าง

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

// Select a specified element
$('#myPopover').popover();

ตัวเลือกป๊อปโอเวอร์

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

Name Type Default Description Try it
animation boolean true

Specifies whether to add a CSS fade transition effect when opening and closing the popover

  • true - Add a fading effect
  • false - Do not add a fading effect
container string, or the boolean false false Appends the popover to a specific element.
Example: container: 'body'
content string "" Specifies the text inside the popover's body
delay number, or object 0 Specifies the number of milliseconds it will take to open and close the popover.

To specify a delay for opening and another one for closing, use the object structure:

delay: {show: 500, hide: 100} - which will take 500 ms to open the popover, but only 100 ms to close it
html boolean  false Specifies whether to accept HTML tags in the popover:
 
  • true - Accept HTML tags
  • false - Do not accept HTML tags
Note: The HTML must be inserted in the title attribute (or using the title option).

When set to false (default), jQuery's text() method will be used. Use this if you are worried about XSS attacks
placement string "right" Specifies the popover position. Possible values:

  • "top" - Popover on top
  • "bottom" - Popover on bottom
  • "left" - Popover on left
  • "right" - Popover on right
  • "auto" - Lets the browser decide the position of the popover. For example, if the value is "auto left", the popover will display on the left side when possible, otherwise on the right. If the value is "auto bottom", the popover will display at the bottom when possible, otherwise on the top
selector string, or the boolean false false Adds the popover to a specified selector
template string   Base HTML to use when creating the popover.

The popover's title will be injected into the .popover-header.

The popover's content will be injected into the .popover-body.

.arrow will become the popover's arrow.

The outermost wrapper element should have the .popover class.
title string "" Specifies the header text of the popover
trigger string "click" Specifies how the popover is triggered. Possible values:

  • "click" - Trigger the popover with a click
  • "hover" - Trigger the popover on hover
  • "focus" - Trigger the popover when it gets focus (by tabbing or clicking .e.g)
  • "manual" - Trigger the popover manually
Tip: To pass multiple values, separate them with a space
offset number or a string 0 Offset of the popover relative to its target
fallbackPlacement string or an aray "flip" Specifies which position Popper wil use on fallback
boundary string or element "scrollParent" Overflow constraint boundary of the popover. Accepts the values "viewport", "window" or "scrollParent", or an HTML element

วิธีการ Popover

ตารางต่อไปนี้แสดงรายการเมธอดป๊อปโอเวอร์ที่มีอยู่ทั้งหมด

Method Description Try it
.popover(options) Activates the popover with an option. See options above for valid values
.popover("show") Shows the popover
.popover("hide") Hides the popover
.popover("toggle") Toggles the popover
.popover("dispose") Hides and destroys the popover
.popover("enable") Enables the popover the ability to be shown. This is default
.popover("disable") Removes the ability to show a popover. The popover can only be shown if it is re-enabled again
.popover("toggleEnabled") Toggles the ability for the popover to be shown or hidden
.popover("update") Updates the position of the popover

เหตุการณ์ป๊อปโอเวอร์

ตารางต่อไปนี้แสดงรายการเหตุการณ์ป๊อปโอเวอร์ที่มีอยู่ทั้งหมด

Event Description Try it
show.bs.popover Occurs when the popover is about to be shown
shown.bs.popover Occurs when the popover is fully shown (after CSS transitions have completed)
hide.bs.popover Occurs when the popover is about to be hidden
hidden.bs.popover Occurs when the popover is fully hidden (after CSS transitions have completed)
inserted.bs.popover Occurs after the show.bs.popover event when the popover template has been added to the DOM

❮ ก่อนหน้า ถัดไป ❯