{
  "name": "divitorque/tooltip",
  "title": "Tooltip",
  "titles": "Tooltips",
  "moduleIcon": "divitorque/tooltip",
  "moduleClassName": "dtq_tooltip",
  "moduleOrderClassName": "dtq_tooltip",
  "category": "module",
  "attributes": {
    "module": {
      "type": "object",
      "selector": "{{selector}}",
      "default": {
        "advanced": {
          "triggerType": { "desktop": { "value": "text" } },
          "placement": { "desktop": { "value": "top" } },
          "trigger": { "desktop": { "value": "hover" } },
          "animation": { "desktop": { "value": "fade" } },
          "arrow": { "desktop": { "value": "on" } },
          "interactive": { "desktop": { "value": "on" } },
          "delayIn": { "desktop": { "value": "100ms" } },
          "delayOut": { "desktop": { "value": "0ms" } },
          "offsetDistance": { "desktop": { "value": "10px" } },
          "maxWidth": { "desktop": { "value": "300px" } },
          "alignment": { "desktop": { "value": "center" } },
          "tipBg": { "desktop": { "value": "#333333" } },
          "tipColor": { "desktop": { "value": "#ffffff" } },
          "tipRadius": { "desktop": { "value": "4px" } },
          "iconSize": { "desktop": { "value": "24px" } },
          "imageWidth": { "desktop": { "value": "80px" } }
        }
      },
      "settings": {
        "meta": { "adminLabel": {} },
        "advanced": {
          "htmlAttributes": {},
          "triggerType": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentTrigger",
              "attrName": "module.advanced.triggerType",
              "label": "Trigger",
              "description": "What the visitor hovers or focuses to reveal the tooltip.",
              "priority": 10,
              "render": true,
              "features": { "sticky": false, "responsive": false, "hover": false },
              "component": {
                "type": "field",
                "name": "divi/select",
                "props": {
                  "options": {
                    "text": { "label": "Text" },
                    "icon": { "label": "Icon" },
                    "image": { "label": "Image" }
                  }
                }
              }
            }
          },
          "triggerIcon": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentTrigger",
              "attrName": "module.advanced.triggerIcon",
              "label": "Trigger Icon",
              "description": "Icon shown as the trigger.",
              "priority": 30,
              "render": true,
              "features": { "sticky": false, "responsive": false, "hover": false },
              "component": { "type": "field", "name": "divi/icon-picker" }
            }
          },
          "triggerImage": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentTrigger",
              "attrName": "module.advanced.triggerImage",
              "label": "Trigger Image",
              "description": "Image shown as the trigger.",
              "priority": 40,
              "render": true,
              "features": { "sticky": false, "responsive": false, "hover": false },
              "component": { "type": "field", "name": "divi/upload" }
            }
          },
          "triggerImageAlt": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentTrigger",
              "attrName": "module.advanced.triggerImageAlt",
              "label": "Image Alt Text",
              "description": "Describes the image for screen readers. Leave empty only if the image is purely decorative.",
              "priority": 50,
              "render": true,
              "features": { "sticky": false, "responsive": false, "hover": false },
              "component": { "type": "field", "name": "divi/text" }
            }
          },
          "placement": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentBehavior",
              "attrName": "module.advanced.placement",
              "label": "Placement",
              "description": "Preferred side for the tooltip. It flips automatically when there is no room.",
              "priority": 10,
              "render": true,
              "features": { "sticky": false, "responsive": false, "hover": false },
              "component": {
                "type": "field",
                "name": "divi/select",
                "props": {
                  "options": {
                    "top": { "label": "Top" },
                    "top-start": { "label": "Top Start" },
                    "top-end": { "label": "Top End" },
                    "right": { "label": "Right" },
                    "right-start": { "label": "Right Start" },
                    "right-end": { "label": "Right End" },
                    "bottom": { "label": "Bottom" },
                    "bottom-start": { "label": "Bottom Start" },
                    "bottom-end": { "label": "Bottom End" },
                    "left": { "label": "Left" },
                    "left-start": { "label": "Left Start" },
                    "left-end": { "label": "Left End" }
                  }
                }
              }
            }
          },
          "trigger": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentBehavior",
              "attrName": "module.advanced.trigger",
              "label": "Open On",
              "description": "Keyboard focus always opens the tooltip as well, whichever option is chosen.",
              "priority": 20,
              "render": true,
              "features": { "sticky": false, "responsive": false, "hover": false },
              "component": {
                "type": "field",
                "name": "divi/select",
                "props": {
                  "options": {
                    "hover": { "label": "Hover" },
                    "click": { "label": "Click" }
                  }
                }
              }
            }
          },
          "animation": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentBehavior",
              "attrName": "module.advanced.animation",
              "label": "Animation",
              "description": "Skipped for visitors who have asked for reduced motion.",
              "priority": 30,
              "render": true,
              "features": { "sticky": false, "responsive": false, "hover": false },
              "component": {
                "type": "field",
                "name": "divi/select",
                "props": {
                  "options": {
                    "fade": { "label": "Fade" },
                    "scale": { "label": "Scale" }
                  }
                }
              }
            }
          },
          "arrow": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentBehavior",
              "attrName": "module.advanced.arrow",
              "label": "Show Arrow",
              "description": "Small pointer joining the tooltip to its trigger.",
              "priority": 40,
              "render": true,
              "features": { "sticky": false, "responsive": false, "hover": false },
              "component": { "type": "field", "name": "divi/toggle" }
            }
          },
          "interactive": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentBehavior",
              "attrName": "module.advanced.interactive",
              "label": "Allow Hovering The Tooltip",
              "description": "Keeps the tooltip open while the pointer is inside it, so links in it can be clicked. Required by WCAG when the tooltip holds content the visitor needs.",
              "priority": 50,
              "render": true,
              "features": { "sticky": false, "responsive": false, "hover": false },
              "component": { "type": "field", "name": "divi/toggle" }
            }
          },
          "delayIn": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentBehavior",
              "attrName": "module.advanced.delayIn",
              "label": "Open Delay",
              "description": "Pause before the tooltip appears.",
              "priority": 60,
              "render": true,
              "features": { "sticky": false, "responsive": false, "hover": false },
              "component": {
                "type": "field",
                "name": "divi/range",
                "props": { "min": 0, "max": 2000, "step": 50, "defaultUnit": "ms", "validUnits": ["ms", "s"] }
              }
            }
          },
          "delayOut": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentBehavior",
              "attrName": "module.advanced.delayOut",
              "label": "Close Delay",
              "description": "Pause before the tooltip disappears.",
              "priority": 70,
              "render": true,
              "features": { "sticky": false, "responsive": false, "hover": false },
              "component": {
                "type": "field",
                "name": "divi/range",
                "props": { "min": 0, "max": 2000, "step": 50, "defaultUnit": "ms", "validUnits": ["ms", "s"] }
              }
            }
          },
          "alignment": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "contentBehavior",
              "attrName": "module.advanced.alignment",
              "label": "Trigger Alignment",
              "description": "Horizontal placement of the trigger within the column.",
              "priority": 80,
              "render": true,
              "features": { "sticky": false, "responsive": false, "hover": false },
              "component": {
                "type": "field",
                "name": "divi/select",
                "props": {
                  "options": {
                    "left": { "label": "Left" },
                    "center": { "label": "Center" },
                    "right": { "label": "Right" }
                  }
                }
              }
            }
          },
          "offsetDistance": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designTooltip",
              "attrName": "module.advanced.offsetDistance",
              "label": "Distance From Trigger",
              "priority": 10,
              "render": true,
              "features": { "sticky": false, "responsive": false, "hover": false },
              "component": {
                "type": "field",
                "name": "divi/range",
                "props": { "min": 0, "max": 60, "step": 1, "defaultUnit": "px" }
              }
            }
          },
          "maxWidth": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designTooltip",
              "attrName": "module.advanced.maxWidth",
              "label": "Max Width",
              "priority": 20,
              "render": true,
              "features": { "sticky": false, "responsive": false, "hover": false },
              "component": {
                "type": "field",
                "name": "divi/range",
                "props": { "min": 80, "max": 600, "step": 10, "defaultUnit": "px" }
              }
            }
          },
          "tipBg": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designTooltip",
              "attrName": "module.advanced.tipBg",
              "label": "Tooltip Background",
              "priority": 30,
              "render": true,
              "features": { "sticky": false, "responsive": false, "hover": false },
              "component": { "type": "field", "name": "divi/color-picker", "props": { "isAlpha": true } }
            }
          },
          "tipColor": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designTooltip",
              "attrName": "module.advanced.tipColor",
              "label": "Tooltip Text Color",
              "priority": 40,
              "render": true,
              "features": { "sticky": false, "responsive": false, "hover": false },
              "component": { "type": "field", "name": "divi/color-picker", "props": { "isAlpha": true } }
            }
          },
          "tipRadius": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designTooltip",
              "attrName": "module.advanced.tipRadius",
              "label": "Tooltip Corner Radius",
              "priority": 50,
              "render": true,
              "features": { "sticky": false, "responsive": false, "hover": false },
              "component": {
                "type": "field",
                "name": "divi/range",
                "props": { "min": 0, "max": 40, "step": 1, "defaultUnit": "px" }
              }
            }
          },
          "iconColor": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designTrigger",
              "attrName": "module.advanced.iconColor",
              "label": "Icon Color",
              "priority": 10,
              "render": true,
              "features": { "sticky": false, "responsive": false, "hover": false },
              "component": { "type": "field", "name": "divi/color-picker", "props": { "isAlpha": true } }
            }
          },
          "iconSize": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designTrigger",
              "attrName": "module.advanced.iconSize",
              "label": "Icon Size",
              "priority": 20,
              "render": true,
              "features": { "sticky": false, "responsive": true, "hover": false },
              "component": {
                "type": "field",
                "name": "divi/range",
                "props": { "min": 8, "max": 200, "step": 1, "defaultUnit": "px" }
              }
            }
          },
          "imageWidth": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designTrigger",
              "attrName": "module.advanced.imageWidth",
              "label": "Image Width",
              "priority": 30,
              "render": true,
              "features": { "sticky": false, "responsive": true, "hover": false },
              "component": {
                "type": "field",
                "name": "divi/range",
                "props": { "min": 16, "max": 600, "step": 1, "defaultUnit": "px" }
              }
            }
          },
          "text": {}
        },
        "decoration": {
          "animation": {},
          "background": {},
          "border": {},
          "boxShadow": {},
          "disabledOn": {},
          "filters": {},
          "overflow": {},
          "position": {},
          "scroll": {},
          "sizing": {},
          "spacing": {},
          "sticky": {},
          "transform": {},
          "transition": {},
          "zIndex": {}
        }
      }
    },
    "triggerText": {
      "type": "object",
      "selector": "{{selector}} .dtq-tipbox__trigger-text",
      "elementType": "content",
      "tagName": "span",
      "inlineEditor": "plainText",
      "attributes": { "class": "dtq-tipbox__trigger-text" },
      "childrenSanitizer": "et_core_esc_previously",
      "default": {
        "innerContent": { "desktop": { "value": "Hover me" } }
      },
      "settings": {
        "innerContent": {
          "groupType": "group-item",
          "item": {
            "groupSlug": "contentTrigger",
            "attrName": "triggerText.innerContent",
            "label": "Trigger Text",
            "description": "Text the visitor hovers or focuses.",
            "priority": 20,
            "render": true,
            "features": { "sticky": false, "responsive": false, "hover": false, "dynamicContent": true },
            "component": { "type": "field", "name": "divi/text" }
          }
        },
        "decoration": {
          "font": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designTrigger",
              "priority": 40,
              "render": true,
              "component": {
                "name": "divi/font",
                "type": "group",
                "props": { "grouped": false, "fieldLabel": "Trigger Text", "hideTextAlign": true }
              }
            }
          }
        }
      }
    },
    "tipContent": {
      "type": "object",
      "selector": "{{selector}} .dtq-tipbox__content",
      "elementType": "richText",
      "tagName": "div",
      "inlineEditor": "richText",
      "attributes": { "class": "dtq-tipbox__content dtq-mce-content" },
      "childrenSanitizer": "et_core_esc_previously",
      "default": {
        "innerContent": { "desktop": { "value": "<p>Whatever needs explaining goes here.</p>" } }
      },
      "settings": {
        "innerContent": {
          "groupType": "group-item",
          "item": {
            "groupSlug": "contentTooltip",
            "attrName": "tipContent.innerContent",
            "label": "Tooltip Content",
            "description": "Shown inside the tooltip. Rich text is allowed; keep it short.",
            "priority": 10,
            "render": true,
            "features": { "sticky": false, "responsive": false, "hover": false, "dynamicContent": true },
            "component": { "type": "field", "name": "divi/richtext" }
          }
        },
        "decoration": {
          "bodyFont": {
            "groupType": "group-item",
            "item": {
              "groupSlug": "designTooltip",
              "priority": 60,
              "render": true,
              "component": {
                "name": "divi/font-body",
                "type": "group",
                "props": { "grouped": false, "fieldLabel": "Tooltip Text" }
              }
            }
          }
        }
      }
    }
  },
  "customCssFields": {
    "trigger": {
      "subName": "trigger",
      "selectorSuffix": " .dtq-tipbox__trigger"
    },
    "content": {
      "subName": "content",
      "selectorSuffix": " .dtq-tipbox__content"
    }
  },
  "settings": {
    "content": "auto",
    "design": "auto",
    "advanced": "auto",
    "groups": {
      "contentTrigger": {
        "panel": "content",
        "priority": 10,
        "groupName": "contentTrigger",
        "component": { "name": "divi/composite", "props": { "groupLabel": "Trigger" } }
      },
      "contentTooltip": {
        "panel": "content",
        "priority": 20,
        "groupName": "contentTooltip",
        "component": { "name": "divi/composite", "props": { "groupLabel": "Tooltip" } }
      },
      "contentBehavior": {
        "panel": "content",
        "priority": 30,
        "groupName": "contentBehavior",
        "component": { "name": "divi/composite", "props": { "groupLabel": "Behaviour" } }
      },
      "designTrigger": {
        "panel": "design",
        "priority": 10,
        "groupName": "designTrigger",
        "multiElements": true,
        "component": {
          "name": "divi/composite",
          "props": { "groupLabel": "Trigger", "clipboardCategory": "style", "presetGroup": "divi/font" }
        }
      },
      "designTooltip": {
        "panel": "design",
        "priority": 20,
        "groupName": "designTooltip",
        "multiElements": true,
        "component": {
          "name": "divi/composite",
          "props": { "groupLabel": "Tooltip", "clipboardCategory": "style", "presetGroup": "divi/font-body" }
        }
      }
    }
  }
}