kyd-shared-badge 0.3.105 → 0.3.106

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.105",
+  "version": "0.3.106",
   "private": false,
   "main": "./src/index.ts",
   "module": "./src/index.ts",

package/src/components/SkillsBubble.tsx

@@ -4,7 +4,7 @@ import React, { useMemo, useRef, useState, useEffect } from 'react';
 import { BubbleChart } from '@knowyourdeveloper/react-bubble-chart';
 import '@knowyourdeveloper/react-bubble-chart/style.css';
 import { green1, green2, green3, green4, green5 } from '../colors';
-import { ProviderIcon } from '../utils/provider';
+import { ProviderIcon, getProviderDisplayName } from '../utils/provider';
 import { providers } from '../types';
 
 type SkillsRadarPoint = {
@@ -312,7 +312,20 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
                       providers.includes(provider.toLowerCase())
                     );
                     return filteredProviders.map((provider) => (
-                      <ProviderIcon key={provider} name={provider} />
+                      <span
+                        key={provider}
+                        onMouseEnter={(e) =>
+                          showLegendTooltipAt(
+                            e.currentTarget,
+                            undefined,
+                            getProviderDisplayName(provider)
+                          )
+                        }
+                        onMouseLeave={hideLegendTooltip}
+                        className="inline-flex items-center"
+                      >
+                        <ProviderIcon name={provider} />
+                      </span>
                     ));
                   })()
                 ) : null}