Refactored CSS for tooltips

IntelliTect · Oct 11, 2024 · 0acade6 · 0acade6
1 parent 55afbb1
commit 0acade6
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 28 deletions.
diff --git a/EssentialCSharp.Web/Views/Shared/_Layout.cshtml b/EssentialCSharp.Web/Views/Shared/_Layout.cshtml
@@ -94,10 +94,10 @@
             <header class="header-background">
                 <div class="banner d-flex justify-content-between">
                     <div class="d-flex align-items-center menu-position">
-                        <button class="menu-btn sidebar-tooltip" v-on:click="sidebarShown = !sidebarShown">
+                        <button class="menu-btn has-tooltip" v-on:click="sidebarShown = !sidebarShown">
                             <i class="fa fa-bars fa-lg icon-light"></i>
-                            <span class="sidebar-tooltip-text">
-                            <b>Ctrl + M</b>
+                            <span class="tooltip-text sidebar-tooltip-text">
+                                <b>Ctrl + M</b>
                             </span>
                         </button>
                         <div class="d-none d-lg-block">
@@ -305,7 +305,7 @@
             <details :open="expandedTocs.has(item.key)"
                      v-on:toggle="!$event.target.open ? expandedTocs.delete(item.key) : expandedTocs.add(item.key)">
                 <summary :class="{
-                         'toc-content' : item.level= =0,
+                         'toc-content' : item.level==0,
                          'nested' : item.level>
                     0,
                     'current-section': currentPage.some(p => p.key == item.key),

diff --git a/EssentialCSharp.Web/Views/Shared/_LoginPartial.cshtml b/EssentialCSharp.Web/Views/Shared/_LoginPartial.cshtml
@@ -4,13 +4,13 @@
 @inject SignInManager<EssentialCSharpWebUser> SignInManager
 @inject UserManager<EssentialCSharpWebUser> UserManager
 
-<div class="menu-tooltip text-nowrap">
+<div class="has-tooltip text-nowrap">
     @if (SignInManager.IsSignedIn(User))
     {
-        <div class="menu-tooltip">
+        <div class="has-tooltip">
             <a id="manage" class="nav-link text-light" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">Hello @UserManager.GetUserName(User)!</a>
         </div>
-        <div class="menu-tooltip">
+        <div class="has-tooltip">
             <form id="logoutForm" class="form-inline" asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="@Url.Action("Index", "Home", new { area = "" })">
                 <button id="logout" type="submit" class="nav-link btn btn-link text-light border-0">
                     <i class="fa fa-right-from-bracket icon-light"></i>
@@ -21,7 +21,7 @@
     }
     else
     {
-        <div class="menu-tooltip">
+        <div class="has-tooltip">
             <a class="nav-link text-light" id="login" asp-area="Identity" asp-page="/Account/Login"><i class="fa fa-right-to-bracket icon-light"></i> Login</a>
         </div>
     }

diff --git a/EssentialCSharp.Web/wwwroot/css/styles.css b/EssentialCSharp.Web/wwwroot/css/styles.css
@@ -228,12 +228,12 @@ a:hover {
   white-space: nowrap;
 }
 
-.menu-tooltip {
+.has-tooltip {
   position: relative;
   display: inline-block;
 }
 
-.menu-tooltip .tooltip-text {
+.has-tooltip .tooltip-text {
   visibility: hidden;
   width: 120px;
   background-color: var(--grey-lighten-1);
@@ -250,11 +250,11 @@ a:hover {
   z-index: 1;
 }
 
-.menu-tooltip:hover .tooltip-text {
+.has-tooltip:hover .tooltip-text {
   visibility: visible;
 }
 
-.menu-tooltip .tooltip-text::after {
+.has-tooltip .tooltip-text::after {
   content: " ";
   position: absolute;
   bottom: 100%; /* At the top of the tooltip */
@@ -265,27 +265,32 @@ a:hover {
   border-color: transparent transparent var(--grey-lighten-1) transparent;
 }
 
-.sidebar-tooltip {
-  position: relative;
-  display: inline-block;
-}
-
-.sidebar-tooltip:hover .sidebar-tooltip-text {
-  visibility: visible;
+.has-tooltip:hover .sidebar-tooltip-text {
+  transition-delay: 1s;
+  transition-property: visibility;
 }
 
-.sidebar-tooltip .sidebar-tooltip-text {
-  visibility: hidden;
-  position: absolute;
-  width: 80px;
-  color: var(--primary-color);
-  font-size: 1rem;
-  background-color: var(--grey-lighten-1);
+.has-tooltip .sidebar-tooltip-text {
+  width: 90px;
+  position: relative;
+  left: 5rem;
   border-radius: 10px;
   padding: 10px;
   white-space: normal;
-  left: 2rem; 
-  bottom: -9px;
+}
+
+.has-tooltip .sidebar-tooltip-text:after {
+  content: '';
+  display: block;
+  width: 0;
+  height: 0;
+  position: absolute;
+  border-width: 5px;
+  border-top: 8px solid transparent;
+  border-bottom: 8px solid transparent;
+  border-right: 8px solid var(--grey-lighten-1);
+  left: -9%;
+  bottom: 30%;
 }
 
 .nav-link {