Bootstrap JS Popover

JS Popover

Popover အစိတ်အပိုင်းသည် tooltips များနှင့်ဆင်တူသည်။ အသုံးပြုသူသည် ဒြပ်စင်တစ်ခုကို နှိပ်သောအခါတွင် ၎င်းသည် ပေါ်လာသော ပေါ်လာသောဘောက်စ်တစ်ခုဖြစ်သည်။ ကွာခြားချက်မှာ Popover တွင် အကြောင်းအရာများစွာ ပါဝင်နိုင်ခြင်းကြောင့် ဖြစ်သည်။

Popovers အကြောင်း သင်ခန်းစာအတွက်၊ ကျွန်ုပ်တို့၏ Bootstrap Popover Tutorial ကို ဖတ်ရှုပါ ။

ဒေတာ-* ရည်ညွှန်းချက်များမှတစ်ဆင့် ဖွင့်ပါ။

data-toggle="popover"popover ကိုအသက်သွင်းသည် ။

titleရည်ညွှန်းချက်သည် popover ၏ ခေါင်းစီးစာသားကို သတ်မှတ်သည် ။

ရည်ညွှန်းချက်သည် popover ၏ကိုယ်ထည်အတွင်းတွင် ပြသသင့် သော data-contentစာသားကို သတ်မှတ်ပေးသည်။

ဥပမာ

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

JavaScript မှတဆင့်

Popovers များသည် CSS-only plugins များမဟုတ်ပါ၊ ထို့ကြောင့် jQuery ဖြင့် အစပြုရပါမည်- သတ်မှတ်ထားသောဒြပ်စင်ကိုရွေးချယ်ပြီး popover()နည်းလမ်းကိုခေါ်ဆိုပါ။

ဥပမာ

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

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

Popover ရွေးစရာများ

ရွေးချယ်စရာများကို data attribute သို့မဟုတ် JavaScript မှတဆင့်ဖြတ်သန်းနိုင်သည်။ ဒေတာရည်ညွှန်းချက်များအတွက်၊ data-placement="" တွင်ကဲ့သို့ ရွေးချယ်စရာအမည်ကို data- တွင် ပေါင်းထည့်ပါ။

Name	Type	Default	Description
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 နည်းလမ်းများ

အောက်ပါဇယားတွင် ရရှိနိုင်သော 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

Popover ပွဲများ

အောက်ပါဇယားသည် ရရှိနိုင်သော 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

❮ ယခင် နောက်တစ်ခု ❯

Bootstrap 4 ကျူတိုရီရယ်

Bootstrap 4 Grid

Bootstrap 4 အခြား

Bootstrap 4 Ref

Bootstrap JS Popover

JS Popover

ဒေတာ-* ရည်ညွှန်းချက်များမှတစ်ဆင့် ဖွင့်ပါ။

ဥပမာ

JavaScript မှတဆင့်

ဥပမာ

Popover ရွေးစရာများ

Popover နည်းလမ်းများ

Popover ပွဲများ