feat(QTooltip): improve QTooltip quasarframework#8733, quasarframewor…

…k#10414

- show on tap/long press on mobile and stay visible until next tap
- do not close on interactions with tooltip content
- prevent first contextmenu on mobile when showing the tooltip

ui/dev/src/pages/components/tooltip.vue

@@ -54,7 +54,7 @@
       <div class="q-gutter-y-md">
         <q-card style="margin-top: 75px">
           <q-card-section class="bg-primary text-center">
-            <q-btn push color="orange" label="Mouse Hover">
+            <q-btn push color="orange" label="Mouse Hover" @click="log('click', $event)">
               <q-tooltip :anchor="anchor" :self="self">
                 <div>Quasar is <strong>great</strong>!</div>
                 <div class="text-center">
@@ -134,14 +134,38 @@
             </div>
           </q-card-section>
           <q-img src="https://cdn.quasar.dev/img/material.png" style="height: 100px">
+            <div>Quasar Rulz!</div>
             <q-tooltip
               :delay="delay"
               :hide-delay="hdelay"
               anchor="center middle"
               self="center middle"
-              :content-class="color ? 'bg-red' : null"
+              :content-class="color ? 'bg-red q-pa-md' : null"
             >
-              Quasar Rulz!
+              <q-card flat>
+                <q-card-section horizontal>
+                  <q-img style="width: 200px; max-width: 30vw;" src="https://cdn.quasar.dev/img/parallax2.jpg">
+                    <div class="absolute-bottom text-subtitle2" style="padding: 8px">{{ text }}</div>
+                  </q-img>
+
+                  <div class="column justify-between">
+                    <q-card-section>
+                      <div
+                        class="no-wrap"
+                        :class="$q.screen.lt.md ? 'column q-gutter-y-md' : 'row items-center q-gutter-x-md'"
+                        style="width: 600px; max-width: 45vw;"
+                      >
+                        <q-toggle v-model="showText" label="Show input field" />
+                        <q-input v-if="showText" v-model="text" dense outlined label="Text" />
+                      </div>
+                    </q-card-section>
+
+                    <q-card-actions align="right">
+                      <q-btn color="primary" label="Button" @click="log('click', $event)" />
+                    </q-card-actions>
+                  </div>
+                </q-card-section>
+              </q-card>
             </q-tooltip>
           </q-img>
         </q-card>
@@ -224,7 +248,10 @@ export default {
       color: true,
       anchorOrigin: { vertical: 'bottom', horizontal: 'middle' },
       selfOrigin: { vertical: 'top', horizontal: 'middle' },
-      targetEl: '#target-img-1'
+      targetEl: '#target-img-1',
+
+      showText: false,
+      text: 'Quasar Rulz!'
     }
   },
   computed: {
@@ -241,6 +268,10 @@ export default {
       setTimeout(() => {
         this.loading = false
       }, 1000)
+    },
+
+    log (title, evt) {
+      console.log(title, evt)
     }
   }
 }

ui/src/components/tooltip/QTooltip.js

@@ -135,6 +135,8 @@ export default Vue.extend({
 
       this.__unconfigureScrollTarget()
       cleanEvt(this, 'tooltipTemp')
+      cleanEvt(this, 'tooltipPreventMenu')
+      cleanEvt(this, 'anchorTemp')
     },
 
     updatePosition () {
@@ -169,33 +171,70 @@ export default Vue.extend({
 
     __delayShow (evt) {
       if (this.$q.platform.is.mobile === true) {
+        if (this.showing) {
+          return
+        }
+
         clearSelection()
         document.body.classList.add('non-selectable')
 
         const target = this.anchorEl
-        const evts = ['touchmove', 'touchcancel', 'touchend', 'click']
-          .map(e => ([ target, e, '__delayHide', 'passiveCapture' ]))
+        const evts = [ 'touchcancel', 'touchend', 'click' ]
+          .map(e => ([ target, e, '__clearPreventContextMenu', 'passiveCapture' ]))
+          .concat([
+            [ document, 'touchstart', '__delayHide', 'passiveCapture' ]
+          ])
 
         addEvt(this, 'tooltipTemp', evts)
+        addEvt(this, 'tooltipPreventMenu', [
+          [ document, 'contextmenu', 'prevent', 'capture' ]
+        ])
       }
 
       this.__registerTimeout(() => { this.show(evt) }, this.delay)
     },
 
     __delayHide (evt) {
+      const innerNode = this.__getInnerNode()
+
+      if (innerNode !== void 0 && evt) {
+        if (evt.type === 'mouseleave') {
+          if (innerNode.contains(evt.relatedTarget) === true) {
+            cleanEvt(this, 'anchorTemp')
+
+            addEvt(this, 'anchorTemp', [
+              [ innerNode, 'mouseleave', '__delayHide', 'passive' ]
+            ])
+
+            return
+          }
+        }
+        else if (innerNode.contains(evt.target) === true) {
+          return
+        }
+      }
+
       if (this.$q.platform.is.mobile === true) {
         cleanEvt(this, 'tooltipTemp')
+        cleanEvt(this, 'tooltipPreventMenu')
         clearSelection()
         // delay needed otherwise selection still occurs
         setTimeout(() => {
           document.body.classList.remove('non-selectable')
         }, 10)
       }
+      else {
+        cleanEvt(this, 'anchorTemp')
+      }
 
       // should __removeTimeout() if this gets removed
       this.__registerTimeout(() => { this.hide(evt) }, this.hideDelay)
     },
 
+    __clearPreventContextMenu () {
+      cleanEvt(this, 'tooltipPreventMenu')
+    },
+
     __configureAnchorEl () {
       if (this.noParentEvent === true || this.anchorEl === void 0) { return }
 
@@ -233,7 +272,8 @@ export default Vue.extend({
           staticClass: 'q-tooltip__container column no-pointer-events'
         }, [
           h('div', {
-            staticClass: 'q-tooltip q-tooltip--style scroll',
+            ref: 'inner',
+            staticClass: 'q-tooltip q-tooltip--style scroll all-pointer-events',
             class: this.contentClass,
             style: this.contentStyle,
             attrs