dragonwocky/notion-enhancer
1
0
Fork 0
mirror of https://github.com/notion-enhancer/notion-enhancer.git synced 2025-04-07 05:59: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
* @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';

1
api/components/tooltip.css
View File

@ -19,6 +19,7 @@
padding: 2px 8px 4px 8px;
position: absolute;
z-index: 999999999999999999;
pointer-events: none;
}
#enhancer--tooltip p {
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
* @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);
text = web.html`${fmt.md.render(text)}`;
if (!($text instanceof Element)) $text = web.html`${fmt.md.render($text)}`;
let displayDelay;
$ref.addEventListener('mouseover', (event) => {
web.render(web.empty(_$tooltip), text);
_$tooltip.style.display = 'block';
web.render(web.empty(_$tooltip), $text);
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) => {
_$tooltip.style.top = event.clientY - _$tooltip.clientHeight + 'px';
_$tooltip.style.left = event.clientX - _$tooltip.clientWidth + 'px';
});
$ref.addEventListener('mouseout', (event) => {
_$tooltip.style.display = '';
$ref.addEventListener('mouseout', async (event) => {
if (!$ref.matches(':hover')) {
await _$tooltip.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 65 }).finished;
_$tooltip.style.display = '';
}
});
};