बूटस्ट्रैप जेएस पॉपओवर
जेएस पॉपओवर
पॉपओवर घटक टूलटिप्स के समान है; यह एक पॉप-अप बॉक्स है जो तब प्रकट होता है जब उपयोगकर्ता किसी तत्व पर क्लिक करता है। अंतर यह है कि पॉपओवर में बहुत अधिक सामग्री हो सकती है।
पॉपओवर के बारे में एक ट्यूटोरियल के लिए, हमारा बूटस्ट्रैप पॉपओवर ट्यूटोरियल पढ़ें ।
डेटा के माध्यम से सक्षम करें-* विशेषताएँ
data-toggle="popover"पॉपओवर को सक्रिय करता है ।
titleविशेषता पॉपओवर के हेडर टेक्स्ट को निर्दिष्ट करती है ।
विशेषता उस data-contentपाठ को निर्दिष्ट करती है जिसे पॉपओवर के शरीर के अंदर प्रदर्शित किया जाना चाहिए।
उदाहरण
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some
content inside the popover">Toggle popover</a>
जावास्क्रिप्ट के माध्यम से
पॉपओवर केवल सीएसएस-प्लगइन नहीं हैं, और इसलिए इन्हें jQuery के साथ प्रारंभ किया जाना चाहिए: निर्दिष्ट तत्व का चयन करें और
popover()विधि को कॉल करें।
उदाहरण
// Select all
elements with data-toggle="popover" in the document
$('[data-toggle="popover"]').popover();
// Select a specified
element
$('#myPopover').popover();
पॉपओवर विकल्प
विकल्प डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से पारित किए जा सकते हैं। डेटा विशेषताओं के लिए, विकल्प नाम को डेटा में जोड़ें- जैसा कि डेटा-प्लेसमेंट = "" में है।
| Name | Type | Default | Description | Try it |
|---|---|---|---|---|
| animation | boolean | true |
Specifies whether to add a CSS fade transition effect when opening and closing the popover
|
|
| 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:
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:
|
|
| 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:
|
|
| 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 |
पॉपओवर तरीके
निम्न तालिका सभी उपलब्ध पॉपओवर विधियों को सूचीबद्ध करती है।
| 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 |