Anatomy of a Component

A basic Component

This is a basic component extending Component.

var Component = require('sensibleui/js/sensibleComponent.js');

MicroTip = function (opts) {
	var self = this;

	var defaults = {};

	$.extend(this, defaults, opts);
	$.extend(this, new Component(this));
  
	return this;
}

module.exports = MicroTip;
sensible.registerComponent('label[microtip]', MicroTip);

When you add an element matching the selector label[microtip], the constructor of MicroTip will run.

DOM

To interact with the Microtip element, you can use the el property. The el is a jQuery selection of the element that matched the selector your registered, label[microtip].

// Add ARIA roles of menu https://w3c.github.io/aria-practices/#menu
this.el.attr('role', 'menu');