From 6ce828cb9649e8fc0a68bd7f0f99719b73229692 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sun, 17 Jul 2022 21:03:42 +1000
Subject: Add more 'title' tooltips

---
 src/App.vue                      | 16 ++++++++++------
 src/components/TileInfoModal.vue |  6 +++---
 src/components/TutorialPane.vue  |  2 +-
 3 files changed, 14 insertions(+), 10 deletions(-)

(limited to 'src')

diff --git a/src/App.vue b/src/App.vue
index f0574bb..9d96b23 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,20 +3,24 @@
 	:style="{backgroundColor: uiOpts.bgColor, scrollbarColor: uiOpts.altColorDark + ' ' + uiOpts.bgColorDark}">
 	<!-- Title bar -->
 	<div class="flex shadow gap-2 p-2" :style="{backgroundColor: uiOpts.bgColorDark2, color: uiOpts.altColor}">
-		<h1 class="my-auto ml-2 text-4xl hover:cursor-pointer" @click="collapseTree">Tilo</h1>
+		<h1 class="my-auto ml-2 text-4xl hover:cursor-pointer" @click="collapseTree" title="Reset tree">Tilo</h1>
 		<div class="mx-auto"/> <!-- Spacer -->
 		<!-- Icons -->
-		<icon-button :disabled="isDisabled('help')" :size="45" :style="buttonStyles" @click="onHelpIconClick">
+		<icon-button :disabled="isDisabled('help')" :size="45" :style="buttonStyles"
+			@click="onHelpIconClick" title="Show help info">
 			<help-icon/>
 		</icon-button>
-		<icon-button :disabled="isDisabled('settings')" :size="45" :style="buttonStyles" @click="onSettingsIconClick">
+		<icon-button :disabled="isDisabled('settings')" :size="45" :style="buttonStyles"
+			@click="onSettingsIconClick" title="Show settings">
 			<settings-icon/>
 		</icon-button>
-		<icon-button :disabled="isDisabled('autoMode')" :size="45" :style="buttonStyles" @click="onAutoIconClick">
+		<icon-button :disabled="isDisabled('autoMode')" :size="45" :style="buttonStyles"
+			@click="onAutoIconClick" title="Auto mode">
 			<play-icon v-if="modeRunning != 'autoMode'"/>
 			<pause-icon v-else/>
 		</icon-button>
-		<icon-button :disabled="isDisabled('search')" :size="45" :style="buttonStyles" @click="onSearchIconClick">
+		<icon-button :disabled="isDisabled('search')" :size="45" :style="buttonStyles"
+			@click="onSearchIconClick" title="Search">
 			<search-icon/>
 		</icon-button>
 	</div>
@@ -47,7 +51,7 @@
 			</div>
 		</div>
 		<transition name="fade">
-			<icon-button v-if="!tutPaneOpen && !uiOpts.tutorialSkip" @click="onStartTutorial"
+			<icon-button v-if="!tutPaneOpen && !uiOpts.tutorialSkip" @click="onStartTutorial" title="Start Tutorial"
 				:size="45" :style="buttonStyles" class="absolute bottom-2 right-2 z-10 shadow-[0_0_2px_black]">
 				<edu-icon/>
 			</icon-button>
diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue
index db7dd4f..421f22f 100644
--- a/src/components/TileInfoModal.vue
+++ b/src/components/TileInfoModal.vue
@@ -18,11 +18,11 @@
 				{{getDisplayName(nodeName, tolNode)}}
 			</h1>
 			<div class="flex justify-evenly text-sm md:text-base">
-				<div> Children: {{tolNode.children.length}} </div>
-				<div> Tips: {{tolNode.tips}} </div>
+				<div> Children: {{(tolNode.children.length).toLocaleString()}} </div>
+				<div> Tips: {{(tolNode.tips).toLocaleString()}} </div>
 				<div>
 					<a :href="'https://tree.opentreeoflife.org/opentree/argus/opentree13.4@' + tolNode.otolId"
-						target="_blank">OTOL <external-link-icon class="inline-block w-3 h-3"/></a>
+						target="_blank" title="Look up in Open Tree of Life">OTOL <external-link-icon class="inline-block w-3 h-3"/></a>
 				</div>
 			</div>
 			<div v-if="nodes.length > 1" class="text-center text-sm px-2">
diff --git a/src/components/TutorialPane.vue b/src/components/TutorialPane.vue
index dd772b1..2803498 100644
--- a/src/components/TutorialPane.vue
+++ b/src/components/TutorialPane.vue
@@ -31,7 +31,7 @@
 			</span>
 		</div>
 		<div v-else-if="stage == 6" :style="contentStyles">
-			{{touchDevice ? 'Tap' : 'Click'}} the icon at the top-right to search
+			{{touchDevice ? 'Tap' : 'Click'}} the icon at the top right of screen to search
 			<span class="block text-sm brightness-50">
 				Or press Ctrl-F
 			</span>
-- 
cgit v1.2.3