From d437271d26f1364007c7459e0ec4bea1467474c8 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 17 May 2021 13:26:11 +0530
Subject: [PATCH] Add tooltips

---
 src/lib/components/history/history.svelte | 8 ++++++--
 src/routes/edit.svelte                    | 3 ++-
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/history/history.svelte b/src/lib/components/history/history.svelte
index 94627b05..a9ced292 100644
--- a/src/lib/components/history/history.svelte
+++ b/src/lib/components/history/history.svelte
@@ -70,8 +70,12 @@
 
 <Card on:select={tabSelectHandler} bind:isOpen {tabs} title="History">
 	<div slot="actions">
-		<button class="btn" on:click|stopPropagation={() => saveHistory()}>💾</button>
-		<button class="btn" on:click|stopPropagation={() => clearHistory()}>❌</button>
+		<button class="btn" on:click|stopPropagation={() => saveHistory()} title="Save current state"
+			>💾</button>
+		<button
+			class="btn"
+			on:click|stopPropagation={() => clearHistory()}
+			title="Delete all saved states">❌</button>
 	</div>
 	<ul class="p-2 space-y-2 overflow-auto h-56">
 		{#each $historyStore as { state, time, name }}
diff --git a/src/routes/edit.svelte b/src/routes/edit.svelte
index 395557f8..7aa3ca4d 100644
--- a/src/routes/edit.svelte
+++ b/src/routes/edit.svelte
@@ -12,7 +12,6 @@
 	import { onMount } from 'svelte';
 	import type monaco from 'monaco-editor';
 	import type { Mermaid } from 'mermaid';
-	import { version } from 'mermaid/package.json';
 	import { goto } from '$app/navigation';
 
 	const mermaid: Mermaid = (window.mermaid as unknown) as Mermaid;
@@ -109,6 +108,7 @@
 					{#if !$codeStore.autoSync}
 						<button
 							class="bg-indigo-500 hover:bg-indigo-700 rounded px-1 mx-2"
+							title="Sync Diagram"
 							on:click={syncDiagram}>🔄</button>
 					{/if}
 					<label for="autoSync">
@@ -132,6 +132,7 @@
 				<button
 					slot="actions"
 					class="rounded shadow px-2 bg-indigo-500 hover:bg-indigo-700"
+					title="View diagram in new page"
 					on:click|stopPropagation={() => viewDiagram()}>View</button>
 
 				<div class="flex-1 overflow-auto">