fix(bug): due to event listeners tendency to disrupt layouts

Using event listeners were forsaken in favor of CSS-based techniques, due to their tendency to disrupt layouts and burden GPU of PC.

src/index.ts

@@ -2,6 +2,7 @@ import '@logseq/libs'; //https://plugins-doc.logseq.com/
 import { LSPluginBaseInfo, PageEntity, SettingSchemaDesc } from '@logseq/libs/dist/LSPlugin.user';
 //import { setup as l10nSetup, t } from "logseq-l10n"; //https://github.com/sethyuan/logseq-l10n
 //import ja from "./translations/ja.json";
+import fileTooltipCSS from "./tooltip.css?inline";
 let restore: Boolean = false;
 
 
@@ -19,11 +20,7 @@ const main = () => {
     //     }
     // })();
 
-
-    logseq.App.onRouteChanged(async () => {
-
-    });
-
+    logseq.provideStyle(fileTooltipCSS);
 
     logseq.App.onSidebarVisibleChanged(async ({ visible }) => {
         if (visible === true) {
@@ -34,7 +31,6 @@ const main = () => {
 
     setTimeout(() => observerMainRight(), 500);
 
-
     logseq.onSettingsChanged((newSet: LSPluginBaseInfo['settings'], oldSet: LSPluginBaseInfo['settings']) => {
         //更新されたら
         if (newSet !== oldSet) restoreAllNamespaces();
@@ -48,6 +44,7 @@ const main = () => {
 
 
 
+
 const callback = () => {
     //callback関数
     observer.disconnect();
@@ -119,25 +116,7 @@ function abbreviateNamespace(namespaceRef: HTMLElement) {
 
     namespaceRef.dataset.origText = text || "";
     namespaceRef.textContent = abbreviatedText;
-    const enterHandler = () => {
-        if (restore === false) {
-            namespaceRef.textContent = namespaceRef.dataset.origText || "";
-        } else if (restore === true) {
-            //イベントリスナーを削除
-            namespaceRef.removeEventListener('mouseenter', enterHandler);
-        }
-    };
-    const leaveHandler = () => {
-        if (restore === false) {
-            namespaceRef.textContent = abbreviatedText;
-        } else if (restore === true) {
-            //イベントリスナーを削除
-            namespaceRef.removeEventListener('mouseleave', leaveHandler);
-        }
-    };
-    // Show entire string on hover
-    namespaceRef.addEventListener('mouseenter', enterHandler);
-    namespaceRef.addEventListener('mouseleave', leaveHandler);
+    namespaceRef.classList.add("shortNamespaceTooltip");//CSSでtooltipを表示する
 }
 
 

src/tooltip.css

@@ -0,0 +1,29 @@
+div#root .shortNamespaceTooltip {
+  position: relative;
+  cursor: pointer
+}
+div#root div#main-content-container .shortNamespaceTooltip::before {
+  white-space: nowrap
+}
+div#root .shortNamespaceTooltip::before {
+  content: attr(data-orig-text);
+  display: block;
+  padding: 3px 13px;
+  background: var(--ls-secondary-background-color);
+  border-radius: 4px;
+  font-size: .94em;
+  top: 0;
+  left: 0;
+  z-index: var(--ls-z-index-level-3);
+  overflow: auto;
+  margin: -.4em auto
+}
+div#root .shortNamespaceTooltip:hover::before {
+  top: 0;
+  opacity: 1;
+  display: block;
+}
+div#root .shortNamespaceTooltip::before {
+  position: absolute;
+  display: none
+}