Add example for QQuickWebEngineTooltipRequest

Implement an example usage in customdialogs application and extend
the documentation.

Change-Id: Ibc240cf94ac939335455f4eac3d52ffec2ba7ff6
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>
Reviewed-by: Allan Sandfeld Jensen <allan.jensen@qt.io>

13 files changed, 78 insertions, 1 deletions

diff --git a/examples/webengine/customdialogs/WebView.qml b/examples/webengine/customdialogs/WebView.qml
index 0715bc709..d754ea7dc 100644
--- a/examples/webengine/customdialogs/WebView.qml
+++ b/examples/webengine/customdialogs/WebView.qml
@@ -49,7 +49,7 @@
 ****************************************************************************/
 
 import QtQuick 2.0
-import QtWebEngine 1.4
+import QtWebEngine 1.10
 
 WebEngineView {
 
@@ -57,6 +57,32 @@ WebEngineView {
     property bool useDefaultDialogs: true
     signal openForm(var form)
 
+    Rectangle {
+        id: tooltip
+        width: 200
+        height: 30
+        z: 50
+        visible: false
+        color: "gray"
+        border.color: "black"
+        border.width: 2
+        radius: 3
+
+        property string text: ""
+
+        Text {
+            x: 0
+            y: 0
+            color: "#ffffff"
+            text: parent.text
+            font.pointSize: 12
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.verticalCenter: parent.verticalCenter
+            font.bold: false
+        }
+
+    }
+
     onContextMenuRequested: function(request) {
         // we only show menu for links with #openMenu
         if (!request.linkUrl.toString().endsWith("#openMenu")) {
@@ -72,6 +98,22 @@ WebEngineView {
                      properties: {"request": request}});
     }
 
+    onTooltipRequested: function(request) {
+        if (useDefaultDialogs)
+            return;
+
+        if (request.type == TooltipRequest.Show) {
+            tooltip.visible = true;
+            tooltip.x = request.x;
+            tooltip.y = request.y;
+            tooltip.text = request.text;
+        } else {
+            tooltip.visible = false;
+        }
+
+        request.accepted = true;
+    }
+
     onAuthenticationDialogRequested: function(request) {
         if (useDefaultDialogs)
             return;
diff --git a/examples/webengine/customdialogs/doc/images/customdialogs-auth1.png b/examples/webengine/customdialogs/doc/images/customdialogs-auth1.png
index 2bde8bd8e..5e8f8d6bd 100644
--- a/examples/webengine/customdialogs/doc/images/customdialogs-auth1.png
+++ b/examples/webengine/customdialogs/doc/images/customdialogs-auth1.png
diff --git a/examples/webengine/customdialogs/doc/images/customdialogs-auth2.png b/examples/webengine/customdialogs/doc/images/customdialogs-auth2.png
index ce358fca0..41828d36d 100644
--- a/examples/webengine/customdialogs/doc/images/customdialogs-auth2.png
+++ b/examples/webengine/customdialogs/doc/images/customdialogs-auth2.png
diff --git a/examples/webengine/customdialogs/doc/images/customdialogs-color1.png b/examples/webengine/customdialogs/doc/images/customdialogs-color1.png
index a51d1bdd3..9208045b2 100644
--- a/examples/webengine/customdialogs/doc/images/customdialogs-color1.png
+++ b/examples/webengine/customdialogs/doc/images/customdialogs-color1.png
diff --git a/examples/webengine/customdialogs/doc/images/customdialogs-color2.png b/examples/webengine/customdialogs/doc/images/customdialogs-color2.png
index 3b0b2e986..9087fdf14 100644
--- a/examples/webengine/customdialogs/doc/images/customdialogs-color2.png
+++ b/examples/webengine/customdialogs/doc/images/customdialogs-color2.png
diff --git a/examples/webengine/customdialogs/doc/images/customdialogs-file1.png b/examples/webengine/customdialogs/doc/images/customdialogs-file1.png
index 0ff39bf38..ba8bdf78c 100644
--- a/examples/webengine/customdialogs/doc/images/customdialogs-file1.png
+++ b/examples/webengine/customdialogs/doc/images/customdialogs-file1.png
diff --git a/examples/webengine/customdialogs/doc/images/customdialogs-file2.png b/examples/webengine/customdialogs/doc/images/customdialogs-file2.png
index e56078c44..aa25579d7 100644
--- a/examples/webengine/customdialogs/doc/images/customdialogs-file2.png
+++ b/examples/webengine/customdialogs/doc/images/customdialogs-file2.png
diff --git a/examples/webengine/customdialogs/doc/images/customdialogs-prompt1.png b/examples/webengine/customdialogs/doc/images/customdialogs-prompt1.png
index 988b4deea..e36ba4a13 100644
--- a/examples/webengine/customdialogs/doc/images/customdialogs-prompt1.png
+++ b/examples/webengine/customdialogs/doc/images/customdialogs-prompt1.png
diff --git a/examples/webengine/customdialogs/doc/images/customdialogs-prompt2.png b/examples/webengine/customdialogs/doc/images/customdialogs-prompt2.png
index 085339378..2c8d92649 100644
--- a/examples/webengine/customdialogs/doc/images/customdialogs-prompt2.png
+++ b/examples/webengine/customdialogs/doc/images/customdialogs-prompt2.png
diff --git a/examples/webengine/customdialogs/doc/images/customdialogs-tooltip.png b/examples/webengine/customdialogs/doc/images/customdialogs-tooltip.png
new file mode 100644
index 000000000..498de9595
--- /dev/null
+++ b/examples/webengine/customdialogs/doc/images/customdialogs-tooltip.png
diff --git a/examples/webengine/customdialogs/doc/images/customdialogs.png b/examples/webengine/customdialogs/doc/images/customdialogs.png
index 13322d2f6..c42114a16 100644
--- a/examples/webengine/customdialogs/doc/images/customdialogs.png
+++ b/examples/webengine/customdialogs/doc/images/customdialogs.png
diff --git a/examples/webengine/customdialogs/doc/src/customdialogs.qdoc b/examples/webengine/customdialogs/doc/src/customdialogs.qdoc
index 5c550ed5e..6319ce53b 100644
--- a/examples/webengine/customdialogs/doc/src/customdialogs.qdoc
+++ b/examples/webengine/customdialogs/doc/src/customdialogs.qdoc
@@ -140,6 +140,38 @@
     To keep things simple, we do not provide any logic on component completion,
     and we simply close the form on any action.
 
+    \section2 Tooltip Requests
+
+    \l [QML]{TooltipRequest} is a request object that is passed as a
+    parameter of the WebEngineView::tooltipRequested signal. We use the
+    \c onTooltipRequested signal handler to handle requests for
+    custom tooltip menus at specific positions:
+
+    \quotefromfile webengine/customdialogs/WebView.qml
+    \skipto WebEngineView
+    \printuntil {
+    \dots 4
+    \skipto onTooltipRequested
+    \printuntil }
+    \printuntil }
+    \printuntil }
+    \dots 4
+    \skipuntil onFileDialogRequested
+    \skipuntil }});
+    \skipuntil }
+    \skipto }
+    \printline }
+
+    The second text field from the top on our page triggers the request. Next,
+    we check whether we should use the default menu. If not, we accept the
+    request and show a custom QML element as tooltip:
+
+    \image customdialogs-tooltip.png
+
+    \quotefromfile webengine/customdialogs/WebView.qml
+    \skipto Rectangle
+    \printuntil }
+
     \section2  Authentication Dialog Requests
 
     \image customdialogs-auth1.png
diff --git a/examples/webengine/customdialogs/index.html b/examples/webengine/customdialogs/index.html
index 490dd79fd..69c0e6b21 100644
--- a/examples/webengine/customdialogs/index.html
+++ b/examples/webengine/customdialogs/index.html
@@ -11,6 +11,9 @@
                  <td><div class="div"><a href="#openMenu" class="link">Right click on text to see link context menu</a></div></td>
              </tr>
              <tr>
+                 <td><div class="div"><p title="I am a tooltip.">Hover this text to display a tooltip</a></div></td>
+             </tr>
+             <tr>
                  <td><button class="button" onclick="window.location = 'http://localhost.:5555/OPEN_AUTH'">
                  Open Authentication Dialog</button></td>
              </tr>