fix(tooltip): stop showing tootip for touch based devices #131

kdsanskar · 2024-01-29T10:49:33Z

fix(tooltip): stop showing tootip for touch based devices

Obligatory GIF (super important!)

🛠️ Type Of Change

These types will increment the version number on release:

Fix
Feature
Performance Improvement
Refactor

These types will not increment the version number, but will still deploy to documentation site on release:

📖 Jira Ticket

https://dialpad.atlassian.net/browse/DLT-1271

📖 Description

Hide the tooltip for touch based device.

💡 Context

Tooltip should not showup for touch based devices as there is no hover event, yet it is showing up when user clicks the anchor element which is not even hover.

📝 Checklist

For all PRs:

I have ensured no private Dialpad links or info are in the code or pull request description (Dialtone is a public repo!).
I have reviewed my changes.
I have added all relevant documentation.
I have considered the performance impact of my change.

For all Vue changes:

I have added / updated unit tests.
I have made my changes in Vue 2 and Vue 3. Note: you may sync your changes from Vue 2 to Vue 3 (or vice versa) using the ./scripts/dialtone-vue-sync.sh script.
I have validated components with a screen reader.
I have validated components keyboard navigation.

🔮 Next Steps

📷 Screenshots / GIFs

🔗 Sources

github-actions · 2024-01-29T10:53:20Z

✔️ Deploy previews ready!
😎 Dialtone preview: https://dialtone.dialpad.com/deploy-previews/pr-131/
😎 Dialtone-vue 2 preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-131/
😎 Dialtone-vue 3 the preview: https://dialtone.dialpad.com/vue3/deploy-previews/pr-131/

packages/dialtone-vue3/components/tooltip/tooltip.vue

github-actions · 2024-01-31T08:42:03Z

✔️ Deploy previews ready!
😎 Dialtone preview: https://dialtone.dialpad.com/deploy-previews/pr-131/
😎 Dialtone-vue 2 preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-131/
😎 Dialtone-vue 3 the preview: https://dialtone.dialpad.com/vue3/deploy-previews/pr-131/

github-actions · 2024-01-31T09:36:09Z

✔️ Deploy previews ready!
😎 Dialtone preview: https://dialtone.dialpad.com/deploy-previews/pr-131/
😎 Dialtone-vue 2 preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-131/
😎 Dialtone-vue 3 the preview: https://dialtone.dialpad.com/vue3/deploy-previews/pr-131/

github-actions · 2024-01-31T09:48:07Z

✔️ Deploy previews ready!
😎 Dialtone preview: https://dialtone.dialpad.com/deploy-previews/pr-131/
😎 Dialtone-vue 2 preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-131/
😎 Dialtone-vue 3 the preview: https://dialtone.dialpad.com/vue3/deploy-previews/pr-131/

braddialpad

Looks good thanks!

iropolo · 2024-02-01T13:50:14Z

packages/dialtone-vue2/components/tooltip/tooltip.vue

    };
  },

  computed: {
    // whether the tooltip is visible or not.
    isVisible () {
-      return this.isShown && this.enabled && (!!this.message.trim() || !!this.$slots.default);
+      return this.isShown && this.enabled && (!!this.message.trim() || !!this.$slots.default) && !this.isTouchDevice;


I would like to improve this computed property, could be something like this?

isVisible() { const hasMessage = !!this.message.trim(); const hasDefaultSlot = !!this.$slots.default; const isDeviceCompatible = !this.isTouchDevice; const shouldBeVisible = this.isShown && this.enabled && (hasMessage || hasDefaultSlot); return shouldBeVisible && isDeviceCompatible; },

I guess it will work as this way, double check it please to be sure, and make this update also in the vue3 version.

iropolo

Looks good, thanks

ninamarina · 2024-02-01T16:10:27Z

The code looks good, though it seems it still shows the tooltip every once in a while when tapping the anchor.
I tested it on my phone, every ten taps the tooltip shows:

It's still much better that what we have now, where the tooltip is shown in every tap.

…ing-tooltip-for-touch-device

github-actions · 2024-02-06T15:15:06Z

✔️ Deploy previews ready!
😎 Dialtone preview: https://dialtone.dialpad.com/deploy-previews/pr-131/
😎 Dialtone-vue 2 preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-131/
😎 Dialtone-vue 3 the preview: https://dialtone.dialpad.com/vue3/deploy-previews/pr-131/

kdsanskar · 2024-02-06T15:25:13Z

The code looks good, though it seems it still shows the tooltip every once in a while when tapping the anchor. I tested it on my phone, every ten taps the tooltip shows:

@ninamarina This issue is cuz mouseenter event is also getting triggered after touchstart event, I have tried to stop that using relatedTarget property but still even after that in chrome browser once in while what is happening is that property relatedTarget is getting not null for touch event which it should not, meanwhile I have tested in firefox it worked fine.

@ninamarina @braddialpad Please let know if there is something more we can do fix it, otherwise it looks like a browser issue in chrome.

refer: https://copyprogramming.com/howto/jquery-on-click-triggers-mouseover-on-touch-device

github-actions · 2024-02-07T08:13:54Z

✔️ Deploy previews ready!
😎 Dialtone preview: https://dialtone.dialpad.com/deploy-previews/pr-131/
😎 Dialtone-vue 2 preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-131/
😎 Dialtone-vue 3 the preview: https://dialtone.dialpad.com/vue3/deploy-previews/pr-131/

github-actions · 2024-02-07T09:18:21Z

✔️ Deploy previews ready!
😎 Dialtone preview: https://dialtone.dialpad.com/deploy-previews/pr-131/
😎 Dialtone-vue 2 preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-131/
😎 Dialtone-vue 3 the preview: https://dialtone.dialpad.com/vue3/deploy-previews/pr-131/

github-actions · 2024-02-07T09:55:24Z

✔️ Deploy previews ready!
😎 Dialtone preview: https://dialtone.dialpad.com/deploy-previews/pr-131/
😎 Dialtone-vue 2 preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-131/
😎 Dialtone-vue 3 the preview: https://dialtone.dialpad.com/vue3/deploy-previews/pr-131/

github-actions · 2024-02-07T10:01:48Z

✔️ Deploy previews ready!
😎 Dialtone preview: https://dialtone.dialpad.com/deploy-previews/pr-131/
😎 Dialtone-vue 2 preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-131/
😎 Dialtone-vue 3 the preview: https://dialtone.dialpad.com/vue3/deploy-previews/pr-131/

## [3.107.2](dialtone-vue3/v3.107.1...dialtone-vue3/v3.107.2) (2024-02-07) ### Bug Fixes * **Tooltip:** stop showing tootip for touch based devices ([#131](#131)) ([0c1be19](0c1be19))

## [2.114.2](dialtone-vue2/v2.114.1...dialtone-vue2/v2.114.2) (2024-02-07) ### Bug Fixes * **Tooltip:** stop showing tootip for touch based devices ([#131](#131)) ([0c1be19](0c1be19))

## [9.11.6](dialtone/v9.11.5...dialtone/v9.11.6) (2024-02-07) ### Bug Fixes * **Tooltip:** stop showing tootip for touch based devices ([#131](#131)) ([0c1be19](0c1be19))

Made changes to check touch device for tooltip

aef5943

kdsanskar requested review from juliodialpad, iropolo, francisrupert, braddialpad and ninamarina as code owners January 29, 2024 10:49

braddialpad requested changes Jan 29, 2024

View reviewed changes

packages/dialtone-vue3/components/tooltip/tooltip.vue Outdated Show resolved Hide resolved

Stop showing tooltip when device is touch screen

f314c4a

kdsanskar changed the title ~~DLT-1271: Stop trigger of hover event when clicked on touch based environment~~ DLT-1271: Stop showing tootip for touch based devices Jan 31, 2024

kdsanskar changed the title ~~DLT-1271: Stop showing tootip for touch based devices~~ fix(tooltip): stop showing tootip for touch based devices Jan 31, 2024

kdsanskar added the no-visual-test Add this tag when the PR does not need visual testing label Jan 31, 2024

kdsanskar requested a review from braddialpad January 31, 2024 08:53

marked touch device flag as false for mouse event

3866889

Minor fix

7e1e4b5

braddialpad approved these changes Feb 1, 2024

View reviewed changes

iropolo reviewed Feb 1, 2024

View reviewed changes

iropolo approved these changes Feb 1, 2024

View reviewed changes

francisrupert approved these changes Feb 1, 2024

View reviewed changes

kdsanskar added 3 commits February 6, 2024 20:36

Minor fix

2fd59dd

Merge remote-tracking branch 'origin/staging' into dlt-1221-stop-show…

b566a8e

…ing-tooltip-for-touch-device

Minor fix

f12afd2

removed unnessary changes

7a6cb14

Made changes to fix test

1852b05

removed comma from comment

2206609

indentation fix

26b1731

ninamarina approved these changes Feb 7, 2024

View reviewed changes

kdsanskar merged commit 0c1be19 into staging Feb 7, 2024
8 checks passed

kdsanskar deleted the dlt-1221-stop-showing-tooltip-for-touch-device branch February 7, 2024 17:35

braddialpad pushed a commit that referenced this pull request Feb 7, 2024

chore(release): dialtone/v9.11.6

9f6bf0a

## [9.11.6](dialtone/v9.11.5...dialtone/v9.11.6) (2024-02-07) ### Bug Fixes * **Tooltip:** stop showing tootip for touch based devices ([#131](#131)) ([0c1be19](0c1be19))

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(tooltip): stop showing tootip for touch based devices #131

fix(tooltip): stop showing tootip for touch based devices #131

kdsanskar commented Jan 29, 2024 •

edited

Loading

github-actions bot commented Jan 29, 2024

github-actions bot commented Jan 31, 2024

github-actions bot commented Jan 31, 2024

github-actions bot commented Jan 31, 2024

braddialpad left a comment

iropolo Feb 1, 2024

kdsanskar Feb 6, 2024

iropolo left a comment

ninamarina commented Feb 1, 2024 •

edited

Loading

github-actions bot commented Feb 6, 2024

kdsanskar commented Feb 6, 2024 •

edited

Loading

github-actions bot commented Feb 7, 2024

github-actions bot commented Feb 7, 2024

github-actions bot commented Feb 7, 2024

github-actions bot commented Feb 7, 2024

fix(tooltip): stop showing tootip for touch based devices #131

fix(tooltip): stop showing tootip for touch based devices #131

Conversation

kdsanskar commented Jan 29, 2024 • edited Loading

fix(tooltip): stop showing tootip for touch based devices

Obligatory GIF (super important!)

🛠️ Type Of Change

📖 Jira Ticket

📖 Description

💡 Context

📝 Checklist

🔮 Next Steps

📷 Screenshots / GIFs

🔗 Sources

github-actions bot commented Jan 29, 2024

github-actions bot commented Jan 31, 2024

github-actions bot commented Jan 31, 2024

github-actions bot commented Jan 31, 2024

braddialpad left a comment

Choose a reason for hiding this comment

iropolo Feb 1, 2024

Choose a reason for hiding this comment

kdsanskar Feb 6, 2024

Choose a reason for hiding this comment

iropolo left a comment

Choose a reason for hiding this comment

ninamarina commented Feb 1, 2024 • edited Loading

github-actions bot commented Feb 6, 2024

kdsanskar commented Feb 6, 2024 • edited Loading

github-actions bot commented Feb 7, 2024

github-actions bot commented Feb 7, 2024

github-actions bot commented Feb 7, 2024

github-actions bot commented Feb 7, 2024

kdsanskar commented Jan 29, 2024 •

edited

Loading

ninamarina commented Feb 1, 2024 •

edited

Loading

kdsanskar commented Feb 6, 2024 •

edited

Loading