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

improved tooltip styling

Browse Source
This commit is contained in:
dragonwocky 2021-10-05 00:04:43 +11:00
parent ae400099eb
commit a5ecd02068
3 changed files with 15 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
api/components/tooltip.css
View File

@ -5,21 +5,24 @@
*/ */
#enhancer--tooltip { #enhancer--tooltip {
position: absolute;
background: var(--theme--ui_tooltip); background: var(--theme--ui_tooltip);
font-size: 11.5px;
padding: 0.15rem 0.4rem;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
border-radius: 3px; border-radius: 3px;
max-width: 20rem; box-shadow: var(--theme--ui_shadow) 0px 1px 4px;
color: var(--theme--ui_tooltip-description);
display: none; display: none;
font-size: 12px;
font-weight: 500;
line-height: 1.4;
max-width: 20rem;
overflow: hidden;
padding: 4px 8px;
position: absolute;
} }
#enhancer--tooltip p { #enhancer--tooltip p {
margin: 0.25rem 0; margin: 0.25rem 0;
} }
#enhancer--tooltip p:first-child { #enhancer--tooltip b,
#enhancer--tooltip strong {
font-weight: 500;
color: var(--theme--ui_tooltip-title); color: var(--theme--ui_tooltip-title);
} }
#enhancer--tooltip p:not(:first-child) {
color: var(--theme--ui_tooltip-description);
}

4
api/components/tooltip.mjs
View File

@ -23,9 +23,9 @@ web.loadStylesheet('api/components/tooltip.css');
*/ */
export const tooltip = ($ref, text) => { export const tooltip = ($ref, text) => {
web.render(document.body, _$tooltip); web.render(document.body, _$tooltip);
text = fmt.md.render(text); text = web.html`${fmt.md.render(text)}`;
$ref.addEventListener('mouseover', (event) => { $ref.addEventListener('mouseover', (event) => {
_$tooltip.innerHTML = text; web.render(web.empty(_$tooltip), text);
_$tooltip.style.display = 'block'; _$tooltip.style.display = 'block';
}); });
$ref.addEventListener('mousemove', (event) => { $ref.addEventListener('mousemove', (event) => {

1
api/registry.mjs
View File

@ -153,6 +153,7 @@ export const db = async (id) => {
return storage.db( return storage.db(
[id], [id],
async (path, fallback = undefined) => { async (path, fallback = undefined) => {
if (typeof path === 'string') path = [path];
if (path.length === 2) { if (path.length === 2) {
// profiles -> profile -> mod -> option // profiles -> profile -> mod -> option
fallback = (await optionDefault(id, path[1])) ?? fallback; fallback = (await optionDefault(id, path[1])) ?? fallback;