Fix: Allow additional custom classes on tooltips (fixes #316) (#317)

adaptlearning · Sep 30, 2024 · af89644 · af89644
1 parent d273e87
commit af89644
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -106,6 +106,9 @@ The tooltip text to display for the item.
 #### \_position (string):
 The tooltip position in relation to the pin. Can be any combination of `top`, `left`, `right`, and `bottom` (e.g. `top left` or `bottom`). The default is `bottom`.
 
+#### \_classes (string):
+CSS class name(s) to be applied to the pin tooltip. The class must be predefined in one of the Less files. Separate multiple classes with a space.
+
 ### \_graphic (object):
 The graphic object that defines the image over which the hot spots are rendered (except when the [_useGraphicsAsPins](#_usegraphicsaspins-boolean) setting is enabled). It contains the following settings:
 

diff --git a/example.json b/example.json
@@ -49,6 +49,7 @@
                 "_tooltip": {
                     "_isEnabled": false,
                     "text": "{{ariaLabel}}",
+                    "_classes": "",
                     "_position": ""
                 }
             },
@@ -69,6 +70,7 @@
                 "_tooltip": {
                     "_isEnabled": false,
                     "text": "{{ariaLabel}}",
+                    "_classes": "",
                     "_position": ""
                 }
             },
@@ -89,6 +91,7 @@
                 "_tooltip": {
                     "_isEnabled": false,
                     "text": "{{ariaLabel}}",
+                    "_classes": "",
                     "_position": ""
                 }
             }
@@ -168,7 +171,9 @@
                 },
                 "_tooltip": {
                     "_isEnabled": false,
-                    "text": "{{ariaLabel}}"
+                    "text": "{{ariaLabel}}",
+                    "_classes": "",
+                    "_position": ""
                 },
                 "_pin": {
                     "src": "course/en/images/example.jpg",
@@ -191,7 +196,9 @@
                 },
                 "_tooltip": {
                     "_isEnabled": false,
-                    "text": "{{ariaLabel}}"
+                    "text": "{{ariaLabel}}",
+                    "_classes": "",
+                    "_position": ""
                 },
                 "_pin": {
                     "src": "course/en/images/example.jpg",

diff --git a/js/hotgraphicModel.js b/js/hotgraphicModel.js
@@ -21,18 +21,20 @@ export default class HotgraphicModel extends ItemsComponentModel {
       const tooltip = child.get('_tooltip');
       if (!tooltip?._isEnabled) return;
       tooltip._id = `hotgraphic-pin-${id}-${index}`;
+      tooltip._classes = [
+        tooltip._classes,
+        'hotgraphic__pin-tooltip'
+      ].filter(Boolean).join(' ');
       const tooltipConfig = {
         _isStatic: hasStaticTooltips,
         ...child.toJSON(),
-        _classes: [ 'hotgraphic__pin-tooltip' ],
         ...tooltip
       };
       tooltipConfig._position = tooltipConfig._position || 'outside bottom middle middle';
       const tooltipModel = tooltips.register(tooltipConfig);
       child.on('change', () => {
         tooltipModel.set({
           ...child.toJSON(),
-          _classes: [ 'hotgraphic__pin-tooltip' ],
           ...tooltip
         });
       });