Tooltip

livebook-dev · Oct 13, 2023 · 1ce618c · 1ce618c
1 parent c955fd7
commit 1ce618c
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 26 deletions.
diff --git a/lib/assets/remote_execution_cell/main.css b/lib/assets/remote_execution_cell/main.css
@@ -243,27 +243,72 @@ a.icon-button img {
   line-height: 1;
 }
 
-.help-section {
-  font-size: 0.875rem;
-  line-height: 1.5em;
-  color: var(--gray-700);
+.tooltip {
+  position: relative;
+  bottom: 40%;
+  display: flex;
+  --distance: 4px;
+  --arrow-size: 5px;
+  --show-delay: 0.5s;
+}
+
+.tooltip:before {
+  position: absolute;
+  content: attr(data-tooltip);
+  white-space: pre;
+  text-align: center;
+  display: block;
+  z-index: 100;
+  background-color: #1c273c;
+  color: #f0f5f9;
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: 4px;
+  padding: 3px 12px;
+  visibility: hidden;
+  transition-property: visibility;
+  transition-duration: 0s;
+  transition-delay: 0s;
 }
 
-.help-section > *:not(:first-child) {
-  margin-top: 20px;
+/* Tooltip arrow */
+.tooltip:after {
+  content: "";
+  position: absolute;
+  display: block;
+  z-index: 100;
+  /* For the arrow we use the triangle trick: https://css-tricks.com/snippets/css/css-triangle/ */
+  border-width: var(--arrow-size);
+  border-style: solid;
+  border-color: #1c273c;
+  visibility: hidden;
+  transition-property: visibility;
+  transition-duration: 0s;
+  transition-delay: 0s;
 }
 
-.help-section h3 {
-  margin-bottom: 8px;
-  font-size: 1.125em;
+.tooltip:hover:before {
+  visibility: visible;
+  transition-delay: var(--show-delay);
 }
 
-.help-section a {
-  color: var(--gray-900);
-  font-weight: 500;
-  text-decoration: underline;
+.tooltip:hover:after {
+  visibility: visible;
+  transition-delay: var(--show-delay);
 }
 
-.help-section a:hover {
-  text-decoration: none;
+.tooltip.left:before {
+  top: 50%;
+  right: 100%;
+  transform: translate(calc(1px - var(--arrow-size) - var(--distance)), -50%);
+}
+
+.tooltip.left:after {
+  top: 50%;
+  right: 100%;
+  transform: translate(calc(0px - var(--distance)), -50%);
+
+  border-right: none;
+  border-top-color: transparent;
+  border-bottom-color: transparent;
 }
diff --git a/lib/assets/remote_execution_cell/main.js b/lib/assets/remote_execution_cell/main.js
@@ -214,14 +214,9 @@ export function init(ctx, payload) {
             inputClass="input input--xs"
             :inline
           />
-          <button type="button" @click="toggleHelpBox" class="icon-button grow">
+          <span class="tooltip left icon-button grow" :data-tooltip="'The Erlang/OTP version of both nodes need to match.'">
             <i class="ri ri-questionnaire-line" aria-hidden="true"></i>
-          </button>
-          <div class="help-section" v-if="showHelpBox">
-            <p>
-             The Erlang/OTP version of both nodes need to match.
-            </p>
-          </div>
+          </span>
         </div>
       </form>
     </div>
@@ -230,7 +225,6 @@ export function init(ctx, payload) {
     data() {
       return {
         fields: payload.fields,
-        showHelpBox: false,
       };
     },
 
@@ -250,9 +244,6 @@ export function init(ctx, payload) {
           : this.fields["cookie"];
         ctx.setSmartCellEditorIntellisenseNode(node, cookie);
       },
-      toggleHelpBox() {
-        this.showHelpBox = !this.showHelpBox;
-      },
     },
 
     mounted() {