パッケージ概要のノードにツールチップを追加

Author: irof

jig-core/src/main/resources/templates/assets/package.js

@@ -513,8 +513,9 @@ function renderPackageDiagram(filterFqn, mode) {
     const addNodeLines = nodeId => {
         const label = nodeLabelById.get(nodeId);
         lines.push(`${nodeId}["${escapeMermaidText(label)}"]`);
-        lines.push(`click ${nodeId} filterPackageDiagram`);
         const fqn = diagramNodeIdToFqn.get(nodeId);
+        const tooltip = fqn ? escapeMermaidText(fqn) : '';
+        lines.push(`click ${nodeId} filterPackageDiagram "${tooltip}"`);
         if (fqn && parentFqns.has(fqn)) {
             lines.push(`class ${nodeId} parentPackage`);
         }

jig-core/src/main/resources/templates/assets/style.css

@@ -199,6 +199,21 @@ main table.fields thead {
 pre.mermaid {
     font-size: 0;
 }
+/* Mermaidのツールチップ表示を調整 */
+/* ツールチップ自体がおまけ機能的な位置付けらしい。 */
+.mermaidTooltip {
+    position: absolute;
+    z-index: 10;
+    padding: 4px 8px;
+    border: 1px solid #aaa;
+    border-radius: 4px;
+    background: #f2f2f2;
+    color: #111;
+    font-size: 12px;
+    line-height: 1.4;
+    pointer-events: none;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+}
 
 label {
     cursor: pointer;