いくつかの要素にtitle属性を追加

changelog.md

@@ -32,6 +32,9 @@ Edition: ORIZIN Agent HTML
 
 ## リリース
 ### [v3.1.80.0dev-Crane] - 2020-06-24
+#### 追加
+- いくつかの要素がマウスホバーで説明が表示されるようになりました。
+
 #### 変更
 - ヘッダーの「ORIZIN Agent」という文字とメニューボタンの間にマージンを追加し，メニューボタンであることをわかりやすくしました。
 

resource/html/basic.html

@@ -1,22 +1,22 @@
 <div id="title">
-    <span class="ripple_effect"><img src="../image/menu_icon.svg" id="menu_open_button" onclick="open_menu()"></span><span class="ripple_effect"><a onclick="move_to_top_page()"><img src="../image/title.svg" alt="ORIZIN Agent"></a></span>
+    <span class="ripple_effect"><img src="../image/menu_icon.svg" id="menu_open_button" onclick="open_menu()" title="メニューを開く"></span><span class="ripple_effect"><a onclick="move_to_top_page()"><img src="../image/title.svg" alt="ORIZIN Agent" title="ホーム画面へ戻る"></a></span>
 </div>
 <div id="side_menu_bar_overlay" onclick="close_menu()"></div>
 <div id="side_menu_bar">
-    <div class="ripple_effect" onclick="move_page('setting.html')">
+    <div class="ripple_effect" onclick="move_page('setting.html')" title="様々な設定を行います。">
         <i class="material_icon">settings</i>設定
     </div>
-    <div class="ripple_effect" onclick="move_page('oss_license.html')">
+    <div class="ripple_effect" onclick="move_page('oss_license.html')" title="使用しているOSSの名称とライセンスの一覧です。">
         <i class="material_icon">assignment</i>オープンソースソフトウェアライセンス
     </div>
-    <div class="ripple_effect" onclick="move_page('privacy_policy.html')">
+    <div class="ripple_effect" onclick="move_page('privacy_policy.html')" title="ユーザーの情報の扱い方について書かれています。">
         <i class="material_icon">privacy_tip</i>プライバシーポリシー
     </div>
-    <div class="ripple_effect" onclick="move_page('about_oa.html')">
+    <div class="ripple_effect" onclick="move_page('about_oa.html')" title="バージョンやソフトウェアの概要です。">
         <i class="material_icon">info</i>ORIZIN Agentについて
     </div>
     <a href="https://github.com/Robot-Inventor/ORIZIN-Agent-HTML/wiki" target="_blank" rel="noreferrer noopener" style="color: var(--text);">
-        <div>
+        <div title="使い方が書かれているサイトを開きます。">
             <i class="material_icon">help</i>ヘルプ＆Wiki(GitHub)<i class="material_icon">open_in_new</i>
         </div>
     </a>

resource/html/index.html

@@ -41,7 +41,7 @@
                     </div>
                 </div>
                 <div id="message_input">
-                    <div class="text_input_group"><input type="text" placeholder="質問を入力" id="requestForm" oninput="change_send_button_status()"><div class="text_underline"></div></div><button id="startButton" disabled><i class="material_icon">send</i></button><button id="start_recognition" onclick="start_recognition()"><i class="material_icon">mic</i></button><span id="listening_message">聞いています。</span><i class="material_icon" id="user_speaking_status">radio_button_checked</i>
+                    <div class="text_input_group"><input type="text" placeholder="質問を入力" id="requestForm" oninput="change_send_button_status()"><div class="text_underline"></div></div><button id="startButton" disabled><i class="material_icon">send</i></button><button id="start_recognition" onclick="start_recognition()" title="音声認識をスタート/ストップ"><i class="material_icon">mic</i></button><span id="listening_message">聞いています。</span><i class="material_icon" id="user_speaking_status">radio_button_checked</i>
                 </div>
             </div>
             <div id="blm" style="margin: 0; padding: 0; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #010101; color: white; display: none;">