feat(aside): add optional tooltip on header

docs/src/xhtml/components/asides/index.xhtml

@@ -289,6 +289,35 @@
 									<li>The new Aside will float the top of the z-index</li>
 								</ul>
 							</section>
+
+							<h3>Tooltip on aside header</h3>
+							<section>
+								<p>
+									A tooltip can be added to the aside header with the
+									<att>data-ts.tooltip</att> attribute. Set the value equal to the text to be
+									displayed in the tooltip.
+								</p>
+								<figure data-ts="DoxMarkup">
+									<script type="text/html">
+										<aside data-ts="Aside"
+											id="aside-with-tooltip"
+											data-ts.title="Aside Title with tooltip"
+											data-ts.tooltip="My Tooltip">
+											<div data-ts="Panel">
+												<p>Aside content.</p>
+											</div>
+										</aside>
+									</script>
+								</figure>
+								<p>
+									Run the script below to open the Aside with tooltip.
+								</p>
+								<figure data-ts="DoxScript">
+									<script type="runnable">
+										ts.ui.get('#aside-with-tooltip').open();
+									</script>
+								</figure>
+							</section>
 						</article>
 					</div>
 				</div>
@@ -413,5 +442,16 @@
 				</menu>
 			</div>
 		</aside>
+
+		<aside
+			data-ts="Aside"
+			id="aside-with-tooltip"
+			data-ts.title="Aside Title with tooltip"
+			data-ts.tooltip="My Tooltip"
+		>
+			<div data-ts="Panel">
+				<p>Aside content.</p>
+			</div>
+		</aside>
 	</body>
 </html>

src/runtime/edbml/scripts/ts.ui.HeaderBarSpirit.edbml

@@ -4,6 +4,7 @@
 
 	var id = (this.$instanceid + header.$instanceid);
 	var color = header.color;
+	var tooltip = header.tooltip;
 
 	<ul class="ts-headerbar-bars">
 		headerbar(header.headerbar);
@@ -13,7 +14,7 @@
 
 	function headerbar(model) {
 		<li data-ts="ToolBar" class="ts-headerbar-headerbar ${color}" id="${id}-headerbar" +
-			data-ts.model="?{model}" data-ts.visible="${header.$showHeaderBar(model)}"></li>
+			data-ts.model="?{model}" data-ts.tooltip="${tooltip}" data-ts.visible="${header.$showHeaderBar(model)}"></li>
 	}
 
 	function centerbar(model) {

src/runtime/edbml/scripts/ts.ui.ToolBarSpirit.edbml

@@ -22,7 +22,8 @@
 		toolbar.tabs,
 		toolbar.checkbox,
 		toolbar.$allactions(),
-		toolbar.pager	
+		toolbar.pager,
+		toolbar.tooltip
 	);
 	rendercenter(id, toolbar.pager);
 	if(toolbar.search && toolbar.search.buttons.length) {
@@ -31,7 +32,7 @@
 		rendernormalbuttons(id, toolbar.$allbuttons());
 	}
 
-	function renderleft(title, icon, burger, back, forward, status, search, tabs, checkbox, actions, pager) {
+	function renderleft(title, icon, burger, back, forward, status, search, tabs, checkbox, actions, pager, tooltip) {
 		var hasnavi = back || forward;
 		var hastabs = !!tabs.getLength();
 		var hasactions = !!actions.length;
@@ -59,7 +60,7 @@
 						rendercheckbox(checkbox);
 					}
 					if(title || status) {
-						renderlabels(title, status, search, hasactions);
+						renderlabels(title, status, search, hasactions, tooltip);
 					}
 					actions.forEach(renderbutton);
 				}
@@ -204,12 +205,16 @@
 	}
 
 	// title (big text) or status message (with markdown)
-	function renderlabels(title, status, search, hasactions) {
+	function renderlabels(title, status, search, hasactions, tooltip) {
 		if(!search || !using(search)) {
 			if(title) {
 				@class = klass('ts-toolbar-title', null, !hasactions);
 				<li id="${id}-title" @class>
-					<label>${title}</label>
+					if(tooltip) {
+						<label data-ts="Tooltip" data-ts.title="${tooltip}" data-ts.offset="true">${title}</label>
+					} else {
+						<label>${title}</label>
+					}
 				</li>
 			} else {
 				@class = klass('ts-toolbar-status', null, !hasactions);

src/runtime/js/ts.ui/bars/bars-api@tradeshift.com/api/ts.ui.Header.js

@@ -177,6 +177,18 @@ ts.ui.Header = (function using(chained) {
 			}
 		}),
 
+		/** Tooltip header
+		 * @param {string} [string]
+		 * @returns {this|string}
+		 */
+		tooltip: chained(function(text) {
+			if (arguments.length) {
+				bar().tooltip(text);
+			} else {
+				return bar().tooltip();
+			}
+		}),
+
 		/**
 		 * @TODO ts.ui.Header.localize
 		 */

src/runtime/js/ts.ui/bars/bars-api@tradeshift.com/models/global/ts.ui.HeaderBarModel.js

@@ -82,6 +82,19 @@ ts.ui.HeaderBarModel = (function using(ToolBarModel, SearchModel, chained) {
 			}
 		},
 
+		/**
+		 * Tooltip headerBarModel
+		 * @type {string}
+		 */
+		tooltip: {
+			getter: function() {
+				return this.headerbar.tooltip;
+			},
+			setter: function(tooltip) {
+				this.headerbar.tooltip = tooltip;
+			}
+		},
+
 		/**
 		 * The buttons.
 		 * @type {ts.ui.ButtonCollection}

src/runtime/js/ts.ui/bars/bars-api@tradeshift.com/models/local/toolbar/ts.ui.ToolBarModel.js

@@ -51,6 +51,12 @@ ts.ui.ToolBarModel = (function using(chained, ButtonModel, CheckBoxModel) {
 		 */
 		title: null,
 
+		/**
+		 * Show tooltip.
+		 * @type {string}
+		 */
+		tooltip: null,
+
 		/**
 		 * Toolbar icon.
 		 * @type {string}

src/runtime/js/ts.ui/bars/bars-gui@tradeshift.com/spirits/global/ts.ui.HeaderBarSpirit.js

@@ -77,6 +77,20 @@ ts.ui.HeaderBarSpirit = (function using(chained) {
 				}
 			}),
 
+			/**
+			 * tooltip HeaderBar.
+			 * @param {string} text
+			 * @return {ts.ui.AsideSpirit|string}
+			 */
+			tooltip: chained(function(text) {
+				var model = this.model();
+				if (arguments.length) {
+					model.tooltip = text;
+				} else {
+					return model.tooltip;
+				}
+			}),
+
 			/**
 			 * Get or set the icon image.
 			 * @param {string} [string]

src/runtime/js/ts.ui/bars/bars-gui@tradeshift.com/spirits/local/toolbar/ts.ui.ToolBarSpirit.js

@@ -293,6 +293,27 @@ ts.ui.ToolBarSpirit = (function using(
 				})
 			),
 
+			/**
+			 * tooltip Toolbar
+			 * @param @optional {string|null} title
+			 * @returns {string|ts.ui.ToolBarSpirit}
+			 */
+			tooltip: confirmed('(string|null)')(
+				chained(function(tooltip_text) {
+					var model = this.model();
+					if (arguments.length) {
+						tooltip_text = tooltip_text || '';
+						if (tooltip_text.trim().indexOf('{') !== 0) {
+							model.tooltip = tooltip_text;
+							this.event.add('click');
+							this.$hascontent();
+						}
+					} else {
+						return model.tooltip;
+					}
+				})
+			),
+
 			/**
 			 * Get or set the search (getter will *create* the search).
 			 * @param @optional {object|ts.ui.SearchModel} opt_json

src/runtime/js/ts.ui/core/core-api@tradeshift.com/models/asides/ts.ui.AsideModel.js

@@ -29,6 +29,12 @@ ts.ui.AsideModel = (function using(chained) {
 		 */
 		title: null,
 
+		/**
+		 * Aside tooltip.
+		 * @type {String}
+		 */
+		tooltip: null,
+
 		/**
 		 * Aside Note.
 		 * @type {String}

src/runtime/js/ts.ui/core/core-gui@tradeshift.com/spirits/tooltip/ts.ui.TooltipSpirit.js

@@ -19,6 +19,13 @@ ts.ui.TooltipSpirit = (function using(Client, CSSPlugin) {
 		 */
 		left: 0,
 
+		/**
+		 * If tooltip position should be based on
+		 * parent element(true) or the whole page(false).
+		 * @type {boolean}
+		 */
+		offset: false,
+
 		/**
 		 * The adjustment of top.
 		 * For exampe 10 or -5
@@ -45,8 +52,15 @@ ts.ui.TooltipSpirit = (function using(Client, CSSPlugin) {
 		onevent: function(e) {
 			this.super.onevent(e);
 			if (e.type === 'mousemove') {
-				var x = e.pageX + parseInt(this.left);
-				var y = e.pageY + parseInt(this.top);
+				var x = parseInt(this.left);
+				var y = parseInt(this.top);
+				if (this.offset) {
+					x += e.offsetX;
+					y += e.offsetY;
+				} else {
+					x += e.pageX;
+					y += e.pageY;
+				}
 				this._pseudoStyle(x, y);
 			}
 		},

src/runtime/js/ts.ui/layout/layout-gui@tradeshift.com/spirits/asides/ts.ui.SideShowSpirit.js

@@ -120,6 +120,20 @@ ts.ui.SideShowSpirit = (function using(
 			}
 		}),
 
+		/**
+		 * Tooltip SideShow
+		 * @param {string} text
+		 * @return {ts.ui.AsideSpirit|string}
+		 */
+		tooltip: chained(function(text) {
+			var header = this._head();
+			if (arguments.length) {
+				header.tooltip(String(text));
+			} else {
+				return header.tooltip();
+			}
+		}),
+
 		/**
 		 * Get or set the titlebar search model.
 		 * @param {Object|ts.ui.SearchModel} search