Show tooltips for keys with a shortName

src/components/three-fiber/unit-key/keycap.tsx

@@ -463,7 +463,7 @@ export const Keycap: React.FC<ThreeFiberKeycapProps> = React.memo((props) => {
           />
         </AniMeshMaterial>
       </animated.mesh>
-      {(macroData || overflowsTexture) && (
+      {(macroData || overflowsTexture || (label && label.shortName)) && (
         <React.Suspense fallback={null}>
           <animated.group
             position={props.position}

src/components/two-string/unit-key/combo-keycap.tsx

@@ -173,7 +173,9 @@ export const ComboKeycap = (props: any) => {
             ></TestOverlay>
           ) : null}
         </ComboKeyBoundingContainer>
-        {(props.macroData || props.overflowsTexture) && (
+        {(props.macroData ||
+          props.overflowsTexture ||
+          (props.lablel && props.label.shortName)) && (
           <TooltipContainer $rotate={props.rotation[2]}>
             <Keycap2DTooltip>
               {props.macroData || (props.label && props.label.tooltipLabel)}

src/components/two-string/unit-key/keycap.tsx

@@ -405,7 +405,7 @@ export const Keycap: React.FC<TwoStringKeycapProps> = React.memo((props) => {
             <canvas ref={canvasRef} style={{}} />
           </CanvasContainer>
         </GlowContainer>
-        {(macroData || overflowsTexture) && (
+        {(macroData || overflowsTexture || (label && label.shortName)) && (
           <TooltipContainer $rotate={rotation[2]}>
             <Keycap2DTooltip>
               {macroData || (label && label.tooltipLabel)}

src/utils/key.ts

@@ -336,6 +336,16 @@ export function getShortNameForKeycode(keycode: IKeycode, size = 100) {
   return name;
 }
 
+export function byteHasShortname(
+  byte: number,
+  basicKeyToByte: Record<string, number>,
+  byteToKey: Record<number, string>,
+) {
+  const keycode = getCodeForByte(byte, basicKeyToByte, byteToKey);
+  const basicKeycode = keycodesList.find(({code}) => code === keycode);
+  return basicKeycode?.shortName;
+}
+
 export function getOtherMenu(
   basicKeyToByte: Record<string, number>,
 ): IKeycodeMenu {

src/utils/keyboard-rendering.ts

@@ -22,6 +22,7 @@ import {
   isArrowKey,
   isMacroKeycodeByte,
   getMacroKeycodeIndex,
+  byteHasShortname,
 } from './key';
 
 export const CSSVarObject = {
@@ -462,6 +463,7 @@ export const getLabel = (
 
   // Full name
   let tooltipLabel: string = '';
+  let shortName: string | undefined;
   if (
     isCustomKeycodeByte(keycodeByte, basicKeyToByte) &&
     selectedDefinition?.customKeycodes &&
@@ -477,12 +479,16 @@ export const getLabel = (
       selectedDefinition.customKeycodes[customKeycodeIdx] as IKeycode,
       700,
     );
+    shortName = (
+      selectedDefinition.customKeycodes[customKeycodeIdx] as IKeycode
+    ).shortName;
   } else if (keycodeByte) {
     label =
       getLabelForByte(keycodeByte, width * 100, basicKeyToByte, byteToKey) ??
       '';
     tooltipLabel =
       getLabelForByte(keycodeByte, 700, basicKeyToByte, byteToKey) ?? '';
+    shortName = byteHasShortname(keycodeByte, basicKeyToByte, byteToKey);
   }
   let macroExpression: string | undefined;
   if (isMacroKeycodeByte(keycodeByte, basicKeyToByte)) {
@@ -529,6 +535,7 @@ export const getLabel = (
       key: (label || '') + (macroExpression || ''),
       size: size,
       offset: offset,
+      shortName,
     };
   }
 };