From 69242e091d00590514cdb857980af899767c4501 Mon Sep 17 00:00:00 2001
From: Felix Henninger <mailbox@felixhenninger.com>
Date: Sat, 4 Apr 2020 16:48:00 +0200
Subject: [PATCH] Extend target tooltip to include AOI targets

Many thanks to David Izydorczyk for suggesting this!
---
 .../components/Behavior/components/Responses.js            | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/ComponentOptions/components/Behavior/components/Responses.js b/packages/builder/src/components/ComponentOptions/components/Behavior/components/Responses.js
index e1924ba54..f477b6a6f 100644
--- a/packages/builder/src/components/ComponentOptions/components/Behavior/components/Responses.js
+++ b/packages/builder/src/components/ComponentOptions/components/Behavior/components/Responses.js
@@ -100,8 +100,11 @@ export default ({ data, formDispatch }) =>
             <p>
               The best example for this is if you're looking for clicks on a specific part of the screen rather than anywhere.
             </p>
-            <p>
-              The target areas are defined by <code>CSS</code> selectors, e.g. <code>button#option_a</code> corresponds to a <code>&lt;button id="option_a" /&gt;</code> element on screen.
+            <p className="text-muted">
+              On <strong>canvas-based screens</strong>, <code>AOIs</code> can be used as target areas. To do so, please enter the <code>@</code> sign followed by the <code>AOI</code> label, for example <code>@label</code>.
+            </p>
+            <p className="text-muted">
+              On <strong><code>HTML</code>-based screens</strong>, the target areas are defined by <code>CSS</code> selectors, e.g. <code>button#option_a</code> corresponds to a <code>&lt;button id="option_a" /&gt;</code> element on screen.
             </p>
           </Hint>
         </span>,