button().popover()
Show popover box for a button, allowing extra user input.
Please note - this property requires the Buttons extension for DataTables.
Description
Buttons are great for quick user interactions and decisions, but there are also cases where you want to hide away advanced controls, or other screens which require user input and then show them on button click. This button().popover()
method provides that via an easy to use API method. It's not a full fledged modal, so you may wish to use a full modal library for certain cases, but if you just want to get some extra information from the user, this method is super easy to use.
Simply pass in the content you want to display and any configuration options you might need (see above). That's it - you can then use the popover for search input, Editor form input, more buttons or anything else.
Important - if you use this method in a button action
function, you will need to call e.stopPropagation();
to stop the click event bubbling up the document and immediately causing the popover to close (it has a click event listener on the body
to know when to hide the popover).
Type
function button().popover( content [, options ] )
- Description:
Show a pop-up box attached to a given button. This gives the ability to define your own content for display in context to the button, such as form fields or additional selection options.
- Parameters:
Name Type Optional 1 content
No The content to display in the popover. This should be an HTML string (including a wrapping element), or a node that you already have and wish to display in the popover.
2 options
No Configuration object to control the specifics of the popover. It supports the following properties:
string
collectionLayout
- Class name for additional styling to be applied. Be a combination offixed
and one of the column layout classes if required.fixed
- Display centred over the windowtwo-columns
- Show content in two columnsthree-columns
- Show content in three columnsfour-columns
- Show content in four columns
string
align
: The horizontal alignment of the popover relative to the button (forabsolute
positioning). It may be one of:button-left
- Align to the left of the activation button.button-right
- Align to the right of the activation button.dt-container
- Align to the left of the DataTables' container and span its full width (good for large content areas).
boolean
autoClose
- Indicate if the popover should close automatically when clicking on a button inside it.true
to auto hidefalse
to not.
boolean
background
- Show a background behind the popover to stop user interaction with the rest of the page.true
to show the background,false
to keep it from showing.
string
dt-button-background
- Class name to use for the background stylingboolean
closeButton
- Boolean indicating whether the close button should be included at the top right of the modal.string
contentClassName
- Class name to use for the content containerstring
collectionTitle
- Deprecated in Favour of popoverTitle - will be removed version 3.0.0. Title text to show at the top of the popoverstring
popoverTitle
- Title text to show at the top of the popoverboolean
dropup
- Show popover above or below the buttontrue
- Show above the button when visiblefalse
- Show below the button (default)
number
fade
Fade in / out time of the popover- Number in milli-seconds.
- Returns:
DataTable API instance - no mutations.
Example
Show a simple popover:
var table = new DataTable('#myTable', {
layout: {
topStart: {
buttons: [
{
action: function (e) {
e.stopPropagation();
this.popover('<div>I love popovers!</div>', {
popoverTitle: 'Hello world'
});
}
}
]
}
}
});