New: Added static tooltips (fixes #304)

* New: Added static tooltips * Update * Move pin tooltip styles to pin section in Less * Use @black Less variable * Update readme * Schemas * Update schemas * Remove hover reference in _tooltip.text descriptions --------- Co-authored-by: Brad Simpson <brad.simpson@kineo.com>
adaptlearning · Jun 11, 2024 · 7831ee3 · 7831ee3
1 parent ac45457
commit 7831ee3
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -86,6 +86,9 @@ If set to `true`, the pin icons will be replaced with the item number. Useful if
 ### \_useGraphicsAsPins (boolean):
 If set to `true`, the image specified by `_graphic.src` will be ignored and the popup images specified in `_items[n]._graphic.src` will instead be laid out in a 2 item width grid system. See [example.json](example.json#L79-L115) for a working example. The default is `false`.
 
+### \_hasStaticTooltips (boolean):
+If set to `true`, tooltips (if enabled) will always be shown rather than only on hover.
+
 ### \_isRound (boolean):
 If set to `true`, the popup images will inherit a 50% border radius. Ideal for use with images that are square that are required to be round. The default is `false`.
 
@@ -95,10 +98,13 @@ If set to `true`, the pins origin point will be changed from `top left` to `cent
 ### \_tooltip (object):
 
 #### \_isEnabled (boolean):
-When set to `true` the tooltip will be shown on hover over the item. The default is `false`.
+When set to `true` the tooltip will be shown on hover over the item. When `_hasStaticTooltips` is set to `true`, the tooltip will always be shown. The default is `false`.
 
 #### text (string):
-The text to display when the user hovers over the item.
+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`.
 
 ### \_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
@@ -22,6 +22,7 @@
         "_isStackedOnMobile": false,
         "_useNumberedPins": false,
         "_useGraphicsAsPins": false,
+        "_hasStaticTooltips": false,
         "_isRound": false,
         "_pinOffsetOrigin": false,
         "_graphic": {
@@ -47,7 +48,8 @@
                 },
                 "_tooltip": {
                     "_isEnabled": false,
-                    "text": "{{ariaLabel}}"
+                    "text": "{{ariaLabel}}",
+                    "_position": ""
                 }
             },
             {
@@ -66,7 +68,8 @@
                 },
                 "_tooltip": {
                     "_isEnabled": false,
-                    "text": "{{ariaLabel}}"
+                    "text": "{{ariaLabel}}",
+                    "_position": ""
                 }
             },
             {
@@ -85,7 +88,8 @@
                 },
                 "_tooltip": {
                     "_isEnabled": false,
-                    "text": "{{ariaLabel}}"
+                    "text": "{{ariaLabel}}",
+                    "_position": ""
                 }
             }
         ],

diff --git a/js/hotgraphicModel.js b/js/hotgraphicModel.js
@@ -12,6 +12,7 @@ export default class HotgraphicModel extends ItemsComponentModel {
   setUpItems() {
     super.setUpItems();
     const id = this.get('_id');
+    const hasStaticTooltips = this.get('_hasStaticTooltips') ?? false;
     this.getChildren().forEach((child, index) => {
 
       // Set _pin for the item if undefined
@@ -21,12 +22,20 @@ export default class HotgraphicModel extends ItemsComponentModel {
       if (!tooltip?._isEnabled) return;
       tooltip._id = `hotgraphic-pin-${id}-${index}`;
       const tooltipConfig = {
+        _isStatic: hasStaticTooltips,
         ...child.toJSON(),
         _classes: [ 'hotgraphic__pin-tooltip' ],
         ...tooltip
       };
       tooltipConfig._position = tooltipConfig._position || 'outside bottom middle middle';
-      tooltips.register(tooltipConfig);
+      const tooltipModel = tooltips.register(tooltipConfig);
+      child.on('change', () => {
+        tooltipModel.set({
+          ...child.toJSON(),
+          _classes: [ 'hotgraphic__pin-tooltip' ],
+          ...tooltip
+        });
+      });
 
     });
   }

diff --git a/less/hotgraphic.less b/less/hotgraphic.less
@@ -36,6 +36,16 @@
     display: block;
   }
 
+  &__pin-tooltip.is-static {
+    --adapt-tooltip-distance: 0;
+    --adapt-tooltip-arrow: false;
+
+    .tooltip__body {
+      color: @black;
+      background-color: transparent;
+    }
+  }
+
   // Hotgraphic as tiles
   // --------------------------------------------------
   &__tile-item-container {

diff --git a/properties.schema b/properties.schema
@@ -192,6 +192,15 @@
       "validators": [],
       "help": "If enabled, the main graphic will be hidden and pins will be displayed as images which can be positioned using classes"
     },
+    "_hasStaticTooltips": {
+      "type": "boolean",
+      "required": true,
+      "default": false,
+      "title": "Use static tooltips",
+      "inputType": "Checkbox",
+      "validators": [],
+      "help": "If enabled, tooltips (if themselves enabled) will always be shown rather than only on hover."
+    },
     "_isRound": {
       "type": "boolean",
       "required": false,
@@ -308,7 +317,7 @@
                 "title": "Is enabled?",
                 "inputType": "Checkbox",
                 "validators": [],
-                "help": "If enabled, a tooltip will be displayed on hover over this item."
+                "help": "If enabled, a tooltip will be displayed on hover over this item. If 'Use static tooltips' is enabled, then tooltips will always be shown."
               },
               "text": {
                 "type": "string",
@@ -317,8 +326,21 @@
                 "title": "Tooltip text",
                 "inputType": "Text",
                 "validators": [],
-                "help": "The tooltip text to display on hover over this item",
+                "help": "The tooltip text to display for this item",
                 "translatable": true
+              },
+              "_position": {
+                "type": "string",
+                "required": true,
+                "title": "Tooltip position",
+                "help": "The tooltip position in relation to the pin. Defaults to 'bottom'",
+                "enum": ["top", "top right", "right", "bottom right", "bottom", "bottom left", "left", "top left"],
+                "inputType": {
+                  "type": "Select",
+                  "options": ["top", "top right", "right", "bottom right", "bottom", "bottom left", "left", "top left"]
+                },
+                "default": "bottom",
+                "editorOnly": true
               }
             }
           },

diff --git a/schema/component.schema.json b/schema/component.schema.json
@@ -137,6 +137,12 @@
           "description": "If enabled, the main graphic will be hidden and pins will be displayed as images which can be positioned using classes",
           "default": false
         },
+        "_hasStaticTooltips": {
+          "type": "boolean",
+          "title": "Use static tooltips",
+          "description": "If enabled, tooltips (if themselves enabled) will always be shown rather than only on hover.",
+          "default": false
+        },
         "_isRound": {
           "type": "boolean",
           "title": "Use circular popup item images",
@@ -294,14 +300,33 @@
                     "type": "boolean",
                     "default": false,
                     "title": "Is enabled?",
-                    "help": "If enabled, a tooltip will be displayed on hover over this item."
+                    "description": "If enabled, a tooltip will be displayed on hover over this item. If 'Use static tooltips' is enabled, then tooltips will always be shown."
                   },
                   "text": {
                     "type": "string",
                     "default": "{{ariaLabel}}",
                     "title": "Tooltip text",
-                    "help": "The tooltip text to display on hover over this item",
+                    "description": "The tooltip text to display for this item",
                     "translatable": true
+                  },
+                  "_position": {
+                    "type": "string",
+                    "title": "Tooltip position",
+                    "default": "bottom",
+                    "description": "The tooltip position in relation to the pin. Defaults to 'bottom'",
+                    "enum": [
+                      "top",
+                      "top right",
+                      "right",
+                      "bottom right",
+                      "bottom",
+                      "bottom left",
+                      "left",
+                      "top left"
+                    ],
+                    "_adapt": {
+                      "editorOnly": true
+                    }
                   }
                 }
               }