Examples

There are 12 different positions you can set on your tooltip modals. If there is not room for you modal to fit in the viewport size, it will make up to five attempts at being smart and positioning the modal in view.

Tooltip

Some contents.

Setup

Tooltip is a component which works on delegation, which means you'll want to specify a *parent* node to work from. Yes, you can use even the body as the parent node, making adding/removing tooltips dynamic and creating the smallest number of event listeners possible. There are four ways you can set up a tooltip.

As Aria-Label

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

As Nested Element

<button class="mk-tt">
	<span>A Tooltip</span>
	<span class="mk-tt-modal">A Tooltip Modal!</span>
</button>

As Sibling Element

<div>
	<button class="mk-tt">
		<span>A Tooltip</span>
	</button>
	<div class="mk-tt-modal">A Tooltip Modal!</div>
</div>

Anywhere You Want

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

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

Instantiation

Remember, Tooltip works on delegation, which is different than our other components. However, instantiation is the same: the first argument being the root, the second being the config options. Config options are opt-in and since Tooltip is a delegate, you'll probably want most of your options set specifically on your tooltip elements. See the Examples Section 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 Tooltip = Mk.get('Tooltip');
//
// instantiate
var myTooltip = new Tooltip('body', {
	// set the default position
	// see Examples for all 12 positions
	position: 'top-center',
	// 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 (tip, modal) {
	console.info('Showing for:', tip, modal);
});
		

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

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

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

instance.on('lock', function (tip, 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 Tooltip [tt] 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.