Use tippy for claims tooltips.

Author: sebadoom

src/editor/claims-tooltip.js

@@ -2,21 +2,25 @@ import { claimsTooltipElement } from '../dom-elements.js';
 import { timeClaims } from './time-tooltip.js';
 import { stringifyIndentSpaces } from './utils.js';
 import strings from '../strings.js';
+import { 
+  payloadElement,
+  headerElement,
+  decodedElement
+} from '../dom-elements.js';
+
+import tippy from 'tippy.js';
 
 function hideTooltip() {
-  claimsTooltipElement.style.display = 'none';
+  decodedElement._tippy.hide();
 }
 
-function showTooltip(x, y, text) {
-  claimsTooltipElement.firstChild.textContent = text;
-  claimsTooltipElement.style.left = x + 'px';
-  claimsTooltipElement.style.top = y + 'px';
-  claimsTooltipElement.style.display = 'block';
+function showTooltip(text) {
+  decodedElement.title = text;
+  decodedElement._tippy.show();
 }
 
-export function claimsTooltipHandler(event) {
+function tooltipHandler(event) {
   const editor = event.currentTarget.querySelector('.CodeMirror').CodeMirror;
-  //const editor = event.currentTarget.firstChild.CodeMirror;
 
   if(!editor) {
     return;
@@ -52,5 +56,21 @@ export function claimsTooltipHandler(event) {
     return;
   }
 
-  showTooltip(event.pageX, event.pageY, claimText);
+  showTooltip(claimText);
+}
+
+export function setupClaimsTooltip() {
+  tippy(decodedElement, {    
+    placement: 'left',
+    arrow: true,
+    followCursor: true,
+    performance: true,
+    size: 'large',
+    dynamicTitle: true,
+    arrowTransform: 'scale(0.75)',
+    distance: 20
+  });
+
+  payloadElement.addEventListener('mousemove', tooltipHandler);
+  headerElement.addEventListener('mousemove', tooltipHandler);
 }

src/editor/index.js

@@ -5,7 +5,7 @@ import {
 } from '../utils.js';
 import { downloadPublicKeyIfPossible } from './public-key-download.js';
 import { timeTooltipHandler } from './time-tooltip.js';
-import { claimsTooltipHandler } from './claims-tooltip.js';
+import { setupClaimsTooltip } from './claims-tooltip.js';
 import { tokenEditor, headerEditor, payloadEditor } from './instances.js';
 import { 
   getTrimmedValue,
@@ -372,8 +372,6 @@ function setupEvents() {
 
   // Human readable timestamp tooltips
   payloadElement.addEventListener('mousemove', timeTooltipHandler);
-  payloadElement.addEventListener('mousemove', claimsTooltipHandler);
-  headerElement.addEventListener('mousemove', claimsTooltipHandler);
 
   setupTabEvents();
 }
@@ -397,4 +395,5 @@ export function setupTokenEditor() {
   loadToken();
   fixEditorHeight();
   setupSecretLengthTooltip();
+  setupClaimsTooltip();
 }

views/token-editor-common.pug

@@ -11,7 +11,7 @@
     #encoded-jwt.box-content.current
       .input.js-input
     #decoded-jwt.box-content
-      .output
+      .output(title='placeholder')
         #js-claims-tooltip placeholder
         .jwt-explained.jwt-header
           p.text-line HEADER: