Improve tooltip configuration

Close #610
Close #620

CHANGELOG.md

@@ -2,6 +2,8 @@
   * [Added] #419 `modifyChild` event. This event is also a good place to 
     implement auto sorting (#559)
   * [Added] #419 node.triggerModifyChild() and node.triggerModify()
+  * [Added] #610 `tree.tooltip` option allows automatic or custom tooltips
+  * [Added] #620 improved tooltip escaping to allow newlines
   * [DEPRECATED] `removeNode` event. Listen for `modifyChild` with operation
     'remove' instead (which is fired on the parent).
   * [Fixed] #576 `loadKeyPath()` sometimes gets the root wrong

demo/sample-configurator.html

@@ -98,7 +98,9 @@
 							   {name: "off", value: ""}],
 	 hint: "Whole tree behaves as one single control"},
 	{name: "titlesTabbable", value: false,
-	 hint: "Node titles can receive keyboard focus"}
+	 hint: "Node titles can receive keyboard focus"},
+	{name: "tooltip", value: false,
+	 hint: "Use title as tooltip (also a callback could be specified)"}
 	];
 
 

src/jquery.fancytree.js

@@ -34,6 +34,7 @@ var i, attr,
 	FT = null, // initialized below
 	TEST_IMG = new RegExp(/\.|\//),  // strings are considered image urls if they conatin '.' or '/'
 	REX_HTML = /[&<>"'\/]/g,
+	REX_TOOLTIP = /[<>"'\/]/g,
 	RECURSIVE_REQUEST_ERROR = "$recursive_request",
 	ENTITY_MAP = {"&": "&amp;", "<": "&lt;", ">": "&gt;", "\"": "&quot;", "'": "&#39;", "/": "&#x2F;"},
 	IGNORE_KEYCODES = { 16: true, 17: true, 18: true },
@@ -238,7 +239,14 @@ function _getElementDataAsDict($el){
 
 
 function _escapeHtml(s){
-	return ("" + s).replace(REX_HTML, function (s) {
+	return ("" + s).replace(REX_HTML, function(s) {
+		return ENTITY_MAP[s];
+	});
+}
+
+
+function _escapeTooltip(s){
+	return ("" + s).replace(REX_TOOLTIP, function(s) {
 		return ENTITY_MAP[s];
 	});
 }
@@ -291,7 +299,7 @@ function _makeNodeTitleStartMatcher(s){
  * @property {string} statusNodeType null for standard nodes. Otherwise type of special system node: 'error', 'loading', 'nodata', or 'paging'.
  * @property {boolean} lazy True if this node is loaded on demand, i.e. on first expansion.
  * @property {boolean} selected Use isSelected(), setSelected() to access this property.
- * @property {string} tooltip Alternative description used as hover banner
+ * @property {string} tooltip Alternative description used as hover popup
  */
 function FancytreeNode(parent, obj){
 	var i, l, name, cl;
@@ -3528,8 +3536,13 @@ $.extend(Fancytree.prototype,
 		if ( opts.renderTitle ){
 			nodeTitle = opts.renderTitle.call(tree, {type: "renderTitle"}, ctx) || "";
 		}
-		if(!nodeTitle){
-			tooltip = node.tooltip ? " title='" + _escapeHtml(node.tooltip) + "'" : "";
+		if ( !nodeTitle ) {
+			if( node.tooltip ) {
+				tooltip = node.tooltip;
+			} else if ( opts.tooltip ) {
+				tooltip = opts.tooltip === true ? node.title : opts.tooltip.call(tree, node);
+			}
+			tooltip = tooltip ? " title='" + _escapeTooltip(tooltip) + "'" : "";
 			id = aria ? " id='ftal_" + opts.idPrefix + node.key + "'" : "";
 			role = aria ? " role='treeitem'" : "";
 			tabindex = opts.titlesTabbable ? " tabindex='0'" : "";
@@ -4390,6 +4403,7 @@ $.widget("ui.fancytree",
 			rerender = true;
 			break;
 		case "escapeTitles":
+		case "tooltip":
 			rerender = true;
 			break;
 		case "source":

src/jsdoc-globals.js

@@ -85,7 +85,8 @@ var EventData = {};
  * @property {boolean} selected Initial selection state. Use `node.setSelected()` or `node.isSelected()` to access.
  * @property {string} statusNodeType If set, make this node a status node. Values: 'error', 'loading', 'nodata', 'paging'.
  * @property {string} title Node text (may contain HTML tags). Use `node.setTitle()` to modify.
- * @property {string} tooltip Will be added as `title` attribute, thus enabling a tooltip.
+ * @property {string} tooltip Will be added as `title` attribute, thus enabling a tooltip.<br>
+ *	   See also the global `tree.tooltip` option.
  * @property {boolean} unselectable Prevent (de-)selection using mouse or keyboard.
  * @property {any} OTHER Attributes other than listed above will be copied to `node.data`.
  *
@@ -143,11 +144,11 @@ var TreePatch = {};
  * @property {string[]} extensions List of active extensions (default: [])
  * @property {boolean} focusOnSelect Set focus when node is checked by a mouse click (default: false)
  * @property {boolean} generateIds Add `id="..."` to node markup (default: false).
- * @property {boolean|Function} icon Display node icons (default: true)<br>
+ * @property {boolean|function} icon Display node icons (default: true)<br>
  *     true: use default icons, depending on `node.folder` and `node.expanded`<br>
  *     false: hide icons<br>
  *     function(node, data): callback returning true, false, or a string.<br>
- *     NOTE: changed with v2.14.
+ *     NOTE: changed with v2.14.<br>
  *	   See the node option of the same name for an explanation of possible string values.
  * @property {boolean} <del>icons</del> @deprecated use `icon` instead
  * @property {string} idPrefix prefix used to generate node markup ID attributes (default: "ft_", requires generateIds to be set)
@@ -169,7 +170,12 @@ var TreePatch = {};
  *     "": Tree control is not tabbable nor may it receive keyboard focus.
  * @property {boolean} titlesTabbable Add tabindex='0' to node title span, so it can receive keyboard focus
  * @property {object} toggleEffect Animation options, false:off (default: { effect: "blind", options: {direction: "vertical", scale: "box"}, duration: 200 })
- *
+ * @property {boolean|function} tooltip Add a `title` attribute to the node markup, thus enabling a tooltip (default: false).<br>
+ *	   false: No automatic tooltip (but still honor `node.tooltip` attribute)<br>
+ *     true:  Copy `node.title` as tooltip<br>
+ *     function:  A callback(node)<br>
+ *	   Note: If a node has the `node.tooltip` attribute set, this will take precedence.<br>
+ *	   Note: If a separate tooltip widget is used, it may be more efficient to use that widget API instead, instead of duplicating tree markup. (<a href="http://api.jqueryui.com/tooltip/#option-content">For example jQuery UI Tooltip</a>.)
  */
 var FancytreeOptions = {};