Examples

Setup

Although Dialog inherits from tooltip, the main difference between the two is that Dialog is *not* a delegate. Tooltip is more performance for batch dialogs/tooltips, where as Dialog is a better choice for single instances or instances that will require more customization. That said, you set up the markup of a Dialog in the same way you would a tooltip.

As Aria-Label

<button class="mk-dg" aria-label="Some text and even markup!">A Dialog</button>

As Nested Element

<button class="mk-dg" data-position="top-center">
	<span>A Dialog</span>
	<span class="mk-dg-modal">A Dialog Modal!</span>
</button>

As Sibling Element

<div>
	<button class="mk-dg" data-position="bottom-center" data-arrow="true">
		<span>A Dialog</span>
	</button>
	<div class="mk-dg-modal">A Dialog Modal!</div>
</div>

Anywhere You Want

This option requires you to 'connect' the dialog trigger and modal with one another manually with id and aria-describedby attributes.

<!-- some part of the document -->
<button class="mk-dg" aria-describedby="my-dialog-modal-id">
	<span>A Dialog</span>
</button>
<!-- some other part of the document -->
<div id="my-dialog-modal-id" class="mk-dg-modal">A Dialog Modal!</div>

Instantiation

Unlike Tooltip (who works on delegation), Dialog is a single instance component like most other Mk components. Instantiation takes two arguments: the first being the root (trigger) node, the second being optional configuration options. Config options are opt-in and can also be added via data-attributes on the root element. See the Examples Section and Tooltip Documentation for more of that. But in case you want to, below are all possible options available to pass in. Additionally, check out the Events Section for adding events to your instance.

var Dialog = Mk.get('Dialog');
//
// instantiate
var myDialog = new Dialog('.mk-dg', {
	// set the default position
	// see Examples for all 12 positions
	position: 'bottom-center',
	//tell Dialog whether to add the arrow class (for caret styling)
	arrow: true,
	// set the delay in milliseconds for mouseover/out tooltips, if any
	delay: 100,
	templates: {
		..change any of the templates for this instance only..
	},
	events: {
		..add events here (optional)..
	}
});

Events

All events are part of the Mk EventEmitter and *not* added to the DOM. Events are also called in context of the component instance so it isn't a great idea to use a proxy function to change context, as you'll loose a lot of beneficial object access.

instance.on('show', function (dg, modal) {
	console.info('Showing for:', dg, modal);
});
		

instance.on('show', function (dg, modal) {
	console.info('Hiding for:', dg, modal);
});
		

instance.on('connect', function (dg, modal) {
	console.info('Connection being made for:', dg, modal);
});
		

instance.on('position', function (dg, modal, coords) {
	console.info('Coors for positioning are:', coords);
});
		

instance.on('lock', function (dg, isLocked) {
	console.info('This tooltip is now ', isLocked && 'locked' || 'unlocked');
});
		

API

Below are the different public properties and methods accessible to you, the end developer. All of these are accessible on your Dialog [dg] instance as well as inside event handlers bound to your instance. Some methods have intentionally been left out due to their difficulty tof use for end developers vs. internal use.