NodeBB / NodeBB/nodebb-plugin-composer-quill

Add ToolTips to Quill Menu

Open
#17 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
19
Forks
14
Avg merge
1m
Merged PRs (30d)
8

Description

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();
	}

});

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the action:composer:loaded hook and inspect how the Quill composer toolbar is initialized. Use the proposed toolTip entry point and verify that the toolbar controls receive the expected tooltip text when the composer loads; no files or tests are named in the issue.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.