dragonwocky/notion-enhancer
1
0
Fork 0
mirror of https://github.com/notion-enhancer/notion-enhancer.git synced 2025-04-09 15:09:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

smoother tooltips, delay arg

Browse Source
This commit is contained in:
dragonwocky 2021-10-20 21:03:20 +11:00
parent 690b677dc9
commit db5ec9a934
3 changed files with 27 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
api/components/_.mjs
View File

@ -14,7 +14,9 @@
/** /**
* add a tooltip to show extra information on hover * add a tooltip to show extra information on hover
* @param {HTMLElement} $ref - the element that will trigger the tooltip when hovered * @param {HTMLElement} $ref - the element that will trigger the tooltip when hovered
* @param {string} text - the markdown content of the tooltip * @param {string|HTMLElement} $text - the markdown content of the tooltip
* @param {number} [delay] - the amount of time the element needs to be hovered over
* for the tooltip to be shown
*/ */
export { setTooltip } from './tooltip.mjs'; export { setTooltip } from './tooltip.mjs';

1
api/components/tooltip.css
View File

@ -19,6 +19,7 @@
padding: 2px 8px 4px 8px; padding: 2px 8px 4px 8px;
position: absolute; position: absolute;
z-index: 999999999999999999; z-index: 999999999999999999;
pointer-events: none;
} }
#enhancer--tooltip p { #enhancer--tooltip p {
margin: 0.25rem 0; margin: 0.25rem 0;

30
api/components/tooltip.mjs
View File

@ -19,20 +19,36 @@ web.loadStylesheet('api/components/tooltip.css');
/** /**
* add a tooltip to show extra information on hover * add a tooltip to show extra information on hover
* @param {HTMLElement} $ref - the element that will trigger the tooltip when hovered * @param {HTMLElement} $ref - the element that will trigger the tooltip when hovered
* @param {string} text - the markdown content of the tooltip * @param {string|HTMLElement} $text - the markdown content of the tooltip
* @param {number} [delay] - the amount of time the element needs to be hovered over
* for the tooltip to be shown
*/ */
export const setTooltip = ($ref, text) => { export const setTooltip = ($ref, $text, delay = 100) => {
web.render(document.body, _$tooltip); web.render(document.body, _$tooltip);
text = web.html`${fmt.md.render(text)}`; if (!($text instanceof Element)) $text = web.html`${fmt.md.render($text)}`;
let displayDelay;
$ref.addEventListener('mouseover', (event) => { $ref.addEventListener('mouseover', (event) => {
web.render(web.empty(_$tooltip), text); web.render(web.empty(_$tooltip), $text);
_$tooltip.style.display = 'block'; if (!displayDelay) {
displayDelay = setTimeout(async () => {
if ($ref.matches(':hover')) {
_$tooltip.style.display = 'block';
_$tooltip.style.top = event.clientY - _$tooltip.clientHeight + 'px';
_$tooltip.style.left = event.clientX - _$tooltip.clientWidth + 'px';
await _$tooltip.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 65 }).finished;
}
displayDelay = undefined;
}, delay);
}
}); });
$ref.addEventListener('mousemove', (event) => { $ref.addEventListener('mousemove', (event) => {
_$tooltip.style.top = event.clientY - _$tooltip.clientHeight + 'px'; _$tooltip.style.top = event.clientY - _$tooltip.clientHeight + 'px';
_$tooltip.style.left = event.clientX - _$tooltip.clientWidth + 'px'; _$tooltip.style.left = event.clientX - _$tooltip.clientWidth + 'px';
}); });
$ref.addEventListener('mouseout', (event) => { $ref.addEventListener('mouseout', async (event) => {
_$tooltip.style.display = ''; if (!$ref.matches(':hover')) {
await _$tooltip.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 65 }).finished;
_$tooltip.style.display = '';
}
}); });
}; };