Tooltip.js

/** @module deliteful/Tooltip */
define([
	"delite/place",
	"delite/register",
	"delite/Container",
	"delite/handlebars!./Tooltip/Tooltip.html",
	"requirejs-dplugins/css!./Tooltip/Tooltip.css"
], function (place, register, Container, template) {

	/**
	 * A tooltip widget, to be used as a popup.
	 * Meant to contain simple or rich text, but not interactive controls (ex: links and buttons).
	 *
	 * @class module:deliteful/Tooltip
	 * @augments module:delite/Container
	 */
	return register("d-tooltip", [HTMLElement, Container], /** @lends module:deliteful/Tooltip# */ {
		/**
		 * The name of the CSS class of this widget.
		 * @member {string}
		 * @default "d-tooltip"
		 */
		baseClass: "d-tooltip",

		template: template,

		constructor: function () {
			this.on("popup-after-show", this.onOpen.bind(this));
			this.on("popup-after-position", this.onPosition.bind(this));
			this.on("popup-before-hide", this.onClose.bind(this));
		},

		/**
		 * Called when tooltip is displayed or repositioned.
		 * This is called from the delite/popup code, and should not be called directly.
		 */
		onPosition: function (/*Object*/ event) {
			function clamp (value, min, max) {
				return Math.max(min, Math.min(max, value));
			}

			if (this._currentOrientClassList) {
				this._currentOrientClassList.forEach(function (cls) {
					this.classList.remove(cls);
				}.bind(this));
				delete this._currentOrientClassList;
			}

			var tooltipCorner = event.corner,
				aroundCorner = event.aroundCorner;

			// If the tooltip is relative to an anchor node, rather than centered in the viewport,
			// then apply the appropriate CSS to properly position the connector node.
			if (tooltipCorner && aroundCorner) {
				// Set appropriate class.
				this._currentOrientClassList = {
					// Real around node
					"MR-ML": ["d-tooltip-right"],
					"ML-MR": ["d-tooltip-left"],
					"TM-BM": ["d-tooltip-above"],
					"BM-TM": ["d-tooltip-below"],
					"BL-TL": ["d-tooltip-below", "d-tooltip-AB-left"],
					"TL-BL": ["d-tooltip-above", "d-tooltip-AB-left"],
					"BR-TR": ["d-tooltip-below", "d-tooltip-AB-right"],
					"TR-BR": ["d-tooltip-above", "d-tooltip-AB-right"],
					"BR-BL": ["d-tooltip-right"],
					"BL-BR": ["d-tooltip-left"],

					// Positioning "around" a point, ex: mouse position
					"BR-TL": ["d-tooltip-below", "d-tooltip-AB-left"],
					"BL-TR": ["d-tooltip-below", "d-tooltip-AB-right"],
					"TL-BR": ["d-tooltip-above", "d-tooltip-AB-right"],
					"TR-BL": ["d-tooltip-above", "d-tooltip-AB-left"]
				}[aroundCorner + "-" + tooltipCorner];
				this._currentOrientClassList.forEach(function (cls) {
					this.classList.add(cls);
				}.bind(this));

				// Position the tooltip connector for middle alignment.
				var myPos = place.position(this);
				var aroundNodeCoords = event.aroundNodePos;
				if (tooltipCorner.charAt(0) === "M" && aroundCorner.charAt(0) === "M") {
					this.connectorNode.style.top = clamp(
						aroundNodeCoords.y + ((aroundNodeCoords.h - this.connectorNode.offsetHeight) >> 1) - myPos.y,
						3,
						this.offsetHeight - this.connectorNode.offsetHeight - 3) + "px";
					this.connectorNode.style.left = "";
				} else if (tooltipCorner.charAt(1) === "M" && aroundCorner.charAt(1) === "M") {
					this.connectorNode.style.left = clamp(
						aroundNodeCoords.x + ((aroundNodeCoords.w - this.connectorNode.offsetWidth) >> 1) - myPos.x,
						3,
						this.offsetWidth - this.connectorNode.offsetWidth - 3) + "px";
					this.connectorNode.style.top = "";
				}
			}
		},

		/**
		 * Called when tooltip is displayed.
		 * This is called from the delite/popup code, and should not be called directly.
		 */
		onOpen: function (/*Object*/ pos) {
			// Setup aria-described property pointing from anchor-node to this node.
			var aroundNode = pos.around;
			if (aroundNode) {
				this.anchorNode = aroundNode.focusNode || aroundNode;
				if (!this.id) {
					this.id = this.widgetId;
				}
				this.anchorNode.setAttribute("aria-describedby", this.id);
			}
		},

		/**
		 * Called when tooltip is hidden.
		 * This is called from the delite/popup code, and should not be called directly.
		 */
		onClose: function () {
			if (this.anchorNode) {
				this.anchorNode.removeAttribute("aria-describedby");
			}
		}
	});
});