fix: display the hotspot content

carbon-design-system · Dec 30, 2024 · e8a2f36 · e8a2f36
1 parent 08a4b00
commit e8a2f36
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/packages/react/src/components/ImageCard/Hotspot.jsx b/packages/react/src/components/ImageCard/Hotspot.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import classnames from 'classnames';
-import { Tooltip } from '@carbon/react';
+import { Toggletip, ToggletipButton, ToggletipContent } from '@carbon/react';
 import { g10 } from '@carbon/themes';
 
 import { settings } from '../../constants/Settings';
@@ -118,30 +118,31 @@ const Hotspot = ({
         '--y-pos': y,
         '--width': containerWidth,
         '--height': containerHeight,
+        '--svg-color': color,
       }}
       className={classnames(`${iotPrefix}--hotspot-container`, {
         [`${iotPrefix}--hotspot-container--selected`]: isSelected,
         [`${iotPrefix}--hotspot-container--has-icon`]: icon,
         [`${iotPrefix}--hotspot-container--is-text`]: isTextType,
         [`${iotPrefix}--hotspot-container--is-fixed`]: type === 'fixed',
         [`${iotPrefix}--hotspot-container--is-dynamic`]: type === 'dynamic',
+        [`${iotPrefix}--hotspot-container--toggletip-fill-color`]: !!color,
       })}
       icon={icon}
     >
       {type === 'fixed' || type === 'dynamic' ? (
-        <Tooltip
+        <Toggletip
           {...others}
           autoAlign
-          label={content}
-          align="bottom"
           onClick={(evt) => {
             if (evt.type === 'click' && onClick) {
               onClick(evt, { x, y });
             }
           }}
         >
-          {iconToRender}
-        </Tooltip>
+          <ToggletipButton>{iconToRender}</ToggletipButton>
+          <ToggletipContent>{content}</ToggletipContent>
+        </Toggletip>
       ) : isTextType ? (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
         <div

diff --git a/packages/react/src/components/ImageCard/_hotspot.scss b/packages/react/src/components/ImageCard/_hotspot.scss
@@ -65,6 +65,15 @@ $selected-border: solid $selected-border-width $border-interactive;
   border-style: dashed;
 }
 
+// Toggletip change the icon color, so we have to revert it by setting the color back on svg
+.#{$iot-prefix}--hotspot-container--toggletip-fill-color {
+  .#{$prefix}--toggletip-button svg,
+  .#{$prefix}--toggletip-button:hover svg,
+  .#{$prefix}--toggletip--open .#{$prefix}--toggletip-button svg {
+    fill: var(--svg-color);
+  }
+}
+
 // TEXT HOTSPOT
 // The custom properties --bold, --italic, --background-color etc are set
 // on the container by the react js code