refactor(dashboard): use bootstrap tooltip on shard status page

dashboard/src/lib/shard.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let hover;
+	import { Tooltip } from 'sveltestrap';
 
 	export let shard = {
 		id: 1,
@@ -25,23 +25,20 @@
 
 <div class="wrapper">
 	<div
-		on:click={() => hover = (hover != shard.id) ? shard.id : null}
+		class="shard" id={`shard-${shard.id.toString()}`}
-		class="shard" id={shard.id.toString()}
 		style={color}
 	>{ shard.id }</div>
-	{#if hover == shard.id}
+	<Tooltip target={`shard-${shard.id.toString()}`} placement="bottom">
-		<div class="more-info">
+		<br>
-			<br>
+		<h3>Shard { shard.id }</h3>
-			<h3>Shard { shard.id }</h3>
+		<br>
-			<br>
+		<span>Status: <b>{ shard.status }</b></span><br>
-			<span>Status: <b>{ shard.status }</b></span><br>
+		<span>Latency: { shard.ping }ms</span><br>
-			<span>Latency: { shard.ping }ms</span><br>
+		<span>Disconnection count: { shard.disconnection_count }</span><br>
-			<span>Disconnection count: { shard.disconnection_count }</span><br>
+		<span>Last connection: { shard.last_connection }</span><br>
-			<span>Last connection: { shard.last_connection }</span><br>
+		<span>Last heartbeat: { shard.last_heartbeat }</span><br>
-			<span>Last heartbeat: { shard.last_heartbeat }</span><br>
+		<br>
-			<br>
+	</Tooltip>
-		</div>
-	{/if}
 </div>
 
 <style>
@@ -73,20 +70,4 @@
 				  user-select: none; /* Non-prefixed version, currently
 										supported by Chrome, Edge, Opera and Firefox */
 	}
-	.more-info {
-		/* display: none; */
-		position: absolute;
-		top: 100%;
-		right: -50%;
-		will-change: transform;
-		min-height: 150px;
-		width: 12em;
-		z-index: 2;
-		border-radius: 5px;
-		background-color: #333;
-		color: #fff;
-		opacity: 95%;
-		text-align: center;
-	}
 </style>
-	

dashboard/src/pages/status.svelte

@@ -5,8 +5,6 @@
 
     import api from '../api';
 
-    let hover = null;
-
     let message = "Loading...";
     let shards = [];
     let clusters = {};
@@ -147,7 +145,7 @@
                     <CardBody>
                         <span>{ message }</span>
                         {#each shards as shard}
-                            <ShardItem shard={shard} bind:hover={hover} />
+                            <ShardItem shard={shard} />
                         {/each}
                     </CardBody>
                 </Card>
@@ -163,7 +161,7 @@
             </div>
             <div class="cluster-shards">
                 {#each clusters[key] as shard}
-                <ShardItem shard={shard} bind:hover={hover} />
+                <ShardItem shard={shard} />
                 {/each}
             </div>
         {/each}