From 660460d01d15da9bcb59858799e9ba9310e087b1 Mon Sep 17 00:00:00 2001
From: zovjsra <110753121@nccu.edu.tw>
Date: Tue, 30 May 2023 14:06:52 +0000
Subject: [PATCH] add tooltips

---
 static/js/generalText.js  | 26 +++++++++++++++++++++++++-
 templates/generalTxt.html |  8 ++------
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/static/js/generalText.js b/static/js/generalText.js
index 2ccc48e..7d1f20f 100644
--- a/static/js/generalText.js
+++ b/static/js/generalText.js
@@ -2,12 +2,30 @@ var tsvPath
 var stopwords = []
 
 const init = () => {
-    $(window).on('mousemove', function (e) {
+    $(window).on('mousemove', (e) => {
         $('#nodeTitle').css({
             left: e.pageX,
             top: e.pageY
         })
     })
+    $('#minRatioLabel').on('mouseenter', () => {
+        $('#nodeTitle').removeClass('hidden')
+        $('#nodeTitleContent').html('兩個相鄰單詞之間出現頻率比值的最小值，小於該值不會被演算法選擇')
+    }).on('mouseleave', () => {
+        $('#nodeTitle').toggleClass('hidden')
+    })
+    $('#maxRatioLabel').on('mouseenter', () => {
+        $('#nodeTitle').removeClass('hidden')
+        $('#nodeTitleContent').html('兩個相鄰單詞之間出現頻率比值的最大值，大於該值不會被演算法選擇')
+    }).on('mouseleave', () => {
+        $('#nodeTitle').toggleClass('hidden')
+    })
+    $('#wordcount').on('mouseenter', () => {
+        $('#nodeTitle').removeClass('hidden')
+        $('#nodeTitleContent').html('僅計算中文字的字數')
+    }).on('mouseleave', () => {
+        $('#nodeTitle').toggleClass('hidden')
+    })
 }
 
 function clearStopWord() {
@@ -123,6 +141,12 @@ function buildSentetree() {
             .on('nodeMouseleave', () => {
                 $('#nodeTitle').addClass('hidden')
             })
+            .on('linkMouseenter', (node) => {
+                $('#nodeTitle').removeClass('hidden')
+                $('#nodeTitleContent').html('連線粗細：連接的兩個單詞同時出現的頻率<br>連線顏色：同層級單詞為灰色連線，不同層級為橘色連線')
+            }).on('linkMouseleave', () => {
+                $('#nodeTitle').addClass('hidden')
+            })
         new ResizeSensor(jQuery('#d3kitRoot'), function () {
             var scale, origin;
             scale = Math.min(2, ($('#graph').outerWidth()) / ($('#d3kitRoot').outerWidth() + 60))
diff --git a/templates/generalTxt.html b/templates/generalTxt.html
index 401456e..3850690 100644
--- a/templates/generalTxt.html
+++ b/templates/generalTxt.html
@@ -45,17 +45,13 @@
         <p id='comment'>這是泛用文字視覺化工具，能夠簡單處理文字檔的視覺化。</p>
         <p id='comment'>支援的語言：繁體中文、英文以及所有使用空格分詞的語言。</p>
         <p id='comment'>使用繁體中文Jieba斷詞器，不保證簡體中文能夠正常使用。</p>
-        <p>參數說明：</p>
-        <p>MaxRatio：兩個相鄰的單詞之間出現頻率的最大比值</p>
-        <p>MinRatio：兩個相鄰的單詞之間出現頻率的最小比值</p>
-        <p>（演算法除了比值外還有其他參考因素，並非符合比值範圍的單詞全部都會顯示出來。）</p>
     </div>
     <div style="margin:10px;">
         <button class="general-button" type="button" id="editSWButton" style="margin:10px 0px;"
             onclick="showStopwordEditor()">編輯停用詞</button>
-        <label>Min Ratio</label>
+        <label id="minRatioLabel">Min Ratio</label>
         <input type="number" step="0.0001" id="minRatio" value="0.001" min="0.0001" max="1">
-        <label>Max Ratio</label>
+        <label id="maxRatioLabel">Max Ratio</label>
         <input type="number" step="0.0001" id="maxRatio" value="1" min="0.0001" max="1">
     </div>
     <div id='rawText' class=''>