add tooltips to header links

Author: gregsdennis

LearnJsonEverything/Services/HelpContent.cs

@@ -44,4 +44,8 @@ either to continue learning or to review the work you've done.
 		|JSON Logic|[https://jsonlogic.com/](https://jsonlogic.com/)|
 		|JSON Patch|[https://jsonpatch.com/](https://jsonpatch.com/)|
 		""";
+
+	public const string BlogPromo = "Stay up to date on the project";
+	public const string DocsPromo = "How to use the libraries, API documentation, and release notes";
+	public const string PlaygroundPromo = "Play with the technologies implemented by the libraries";
 }

LearnJsonEverything/Services/Redirects.cs

@@ -2,7 +2,7 @@
 
 public static class Redirects
 {
-	public const string Github = "https://github.com/gregsdennis/json-everything";
+	public const string Github = "https://github.com/json-everything/json-everything";
 
-	public const string Slack = "https://join.slack.com/t/manateeopensource/shared_invite/enQtMzU4MjgzMjgyNzU3LWZjYzAzYzY3NjY1MjY3ODI0ZGJiZjc3Nzk1MDM5NTNlMjMyOTE0MzMxYWVjMjdiOGU1NDY5OGVhMGQ5YzY4Zjg";
+	public const string Slack = "https://join.slack.com/t/json-everything/shared_invite/zt-4klcm69x-_MA8Z2ZSZ4JNu_d3lQOVPg";
 }

LearnJsonEverything/Shared/Header.razor

@@ -9,19 +9,44 @@
 		</div>
 		<div class="px-1">
 			<a class="navbar-brand m-2" href="https://json-everything.net">
-				playground
+				<span class="tooltip-icon">
+					playground
+					<span class="tooltip-text header-tooltip">
+						<MarkdownSpan Content="@HelpContent.PlaygroundPromo"></MarkdownSpan>
+					</span>
+				</span>
 			</a>
 			<a class="navbar-brand m-2" href="https://blog.json-everything.net">
-				blog
+				<span class="tooltip-icon">
+					blog
+					<span class="tooltip-text header-tooltip">
+						<MarkdownSpan Content="@HelpContent.BlogPromo"></MarkdownSpan>
+					</span>
+				</span>
 			</a>
 			<a class="navbar-brand m-2" href="https://docs.json-everything.net">
-				docs
+				<span class="tooltip-icon">
+					docs
+					<span class="tooltip-text header-tooltip">
+						<MarkdownSpan Content="@HelpContent.DocsPromo"></MarkdownSpan>
+					</span>
+				</span>
 			</a>
-			<a href="@Redirects.Slack" class="m-2 no-underline" data-toggle="tooltip" data-placement="bottom" title="Discuss in Slack" target="_blank">
-				<img src="img/slack.png" alt="Discuss in Slack"/>
+			<a href="@Redirects.Slack" class="navbar-brand m-2" target="_blank">
+				<span class="tooltip-icon">
+					<img src="img/slack.png" alt="Discuss in Slack" />
+					<span class="tooltip-text header-tooltip">
+						<MarkdownSpan Content="Discuss in Slack"></MarkdownSpan>
+					</span>
+				</span>
 			</a>
-			<a href="@Redirects.Github" class="m-2 no-underline" data-toggle="tooltip" data-placement="bottom" title="View on GitHub" target="_blank">
-				<img src="img/github.png" alt="View on GitHub"/>
+			<a href="@Redirects.Github" class="navbar-brand m-2" target="_blank">
+				<span class="tooltip-icon">
+					<img src="img/github.png" alt="View on GitHub" />
+					<span class="tooltip-text header-tooltip">
+						<MarkdownSpan Content="View on GitHub"></MarkdownSpan>
+					</span>
+				</span>
 			</a>
 		</div>
 	</div>

LearnJsonEverything/wwwroot/css/app.css

@@ -289,6 +289,13 @@ a.navbar-brand {
 	visibility: visible;
 }
 
+.header-tooltip {
+  top: 50px;
+  transform: translateX(-65%);
+  text-wrap: nowrap;
+  max-width: none;
+}
+
 /*--- DOCS ---*/
 .docs-pane {
 	margin: 2em auto;