Add ToolTips to Quill Menu

[PostMidnight]

In action:composer:loaded add the following function call:

Call this function by:

		toolTip('.composer[data-uuid="' + data.post_uuid + '"]');


function toolTip (composer_selector) {
		let tooltips = {
			'bold': 'Help I am BOLD',
                        //your icons - perhaps add translate here
		};

		let showTooltip = (el, isSpan) => {
			let tool = (isSpan ? el.className.replace('span', '') : el.className.replace('ql-', '')).replace(/\s+/g, '.');

			if (tooltips[tool]) {
				console.log('toolTip: ' + tooltips[tool]);
				if(isSpan)
					document.querySelector(composer_selector + ' .' + tool).setAttribute('title', tooltips[tool]);
				else
					document.querySelector(composer_selector + ' .ql-' + tool).setAttribute('title', tooltips[tool]);
			}
		};

		let toolbarElement = document.querySelector(composer_selector + ' .ql-toolbar');
		if (toolbarElement) {
			let matches = toolbarElement.querySelectorAll('button');
			for (let el of matches) {
				showTooltip(el, false);
			}
			toolbarElement.querySelectorAll(':scope > span').forEach(function(element) {
				matches = element.querySelectorAll(':scope > span');
				for (let el of matches) {
					showTooltip(el, true);
				}
			});
		}

		//Enable tooltip
		$(composer_selector + ' [data-toggle="tooltip"]').tooltip();
	}

});

[julianlam]

Hi there -- this change cannot be added because it is not made in such a way that follows coding best practices.

1. Try not to use globals, or save variables to window
2. There may be existing tooltip logic in Quill
3. You also can't use ES6 in client-side, yet.

[julianlam]

Will keep this open, as tooltips are not working at this time.