Since: Buttons 1.6.0

Show popover box for a button, allowing extra user input.
Please note - this property requires the Buttons extension for DataTables.


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).


function button().popover( content [, options ] )


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.


DataTable API instance - no mutations.


Show a simple popover:

var table = new DataTable('#myTable', {
	layout: {
		topStart: {
			buttons: [
					action: function (e) {
						this.popover('<div>I love popovers!</div>', {
							popoverTitle: 'Hello world'