NodeBB / NodeBB/nodebb-plugin-composer-quill
Add ToolTips to Quill Menu
Open
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
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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