Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Touch events support for Tooltip #8454

Open
dandohotaru opened this issue Jan 15, 2020 · 11 comments · May be fixed by #16489
Open

Touch events support for Tooltip #8454

dandohotaru opened this issue Jan 15, 2020 · 11 comments · May be fixed by #16489
Assignees
@mehmetcetin01140
Labels
Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add

Comments

@dandohotaru
Copy link

I'm submitting a ... (check one with "x")

[ x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Stackblitz Case (Bug Reports)
see bellow for a test case scenario with tooltips placed on both icon elements or textboxes
https://stackblitz.com/edit/primeng-issues-tooltips

Current behavior
the tooltips work fine on desktop on any element
the tooltips do not seem to work on ios browsers

Expected behavior
tooltips displayed through "tap/double tap" or "long press/touch and hold"

Minimal reproduction of the problem with instructions
the issues should be reproducible withe the above stackblitz

What is the motivation / use case for changing the behavior?
make the tooltip a viable solution for the mobile experience as well

Please tell us about your environment:
ios 13 browsers (safari, edge, chrome)

  • Angular version:
    8.X, 9.X

  • PrimeNG version:
    8.X, 9.X
@cagataycivici cagataycivici changed the title pTooltip is not being shown for mobile ios browsers Touch events support for Tooltip Apr 3, 2020
@cagataycivici cagataycivici added the Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add label Apr 3, 2020
@agustinsantiago
Copy link

agustinsantiago commented Sep 8, 2020 •
edited
Loading

<edit: previous version didn't work>

Hitting the same issue.

A workaround (stackblitz):

<span pTooltip="Some tooltip content" tooltipPosition="bottom"
      tabindex="0" tooltipEvent="focus" style="outline: 0;">
  Whatever content you want here
</span>

The key is in tabindex="0" which makes the span focusable on click. outline: 0; removes the outline the browser adds to the element on focus (so that it stays the same as before).

I verified it on Chrome (MacOS, Android and iOS)

@rafa-suagu
Copy link

The workaround doesn't work for Safari iOS

@ssarkisy
Copy link

The problem still exists. pTooltip is useless for touch devices

@ssarkisy
Copy link

The workaround doesn't work for Safari iOS

I ended up with this:

<span
    *ngIf="this.currentLayout !== 'xxs'"
    [pTooltip]="tooltips.barChart"
>
    <i class="fas fa-info-circle"></i>
</span>

<span
    *ngIf="this.currentLayout === 'xxs'"
    [pTooltip]="tooltips.barChart"
    [tooltipEvent]="'focus'"
    [tabindex]="0"
    style="outline: 0;"
    #hint1
    (click)="$event.stopPropagation(); hint1.focus()"
>
    <i class="fas fa-info-circle"></i>
</span>

Which isn't ideal solution to be sure.

@mbarmettler
Copy link

still an issue in 14.0.2... workaround from "agustinsantiago" helped to make it work on mobile-tabs....

@mertsincan
Copy link
Member

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap?
Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,

@Ricudo
Copy link

Ricudo commented Dec 28, 2022

Hello,
I still have a problem with pTooltip on iPad, when I use "hover" tooltipEvent. The tooltip appears only for a moment and then disappears. I don't have any problem with it on Windows or Android devices. I've tested it in different contexts and the problem appears only on iOS. Solve the problem please to the pTooltip supports iOS too.
Thank you in advance!
Best regards!

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap? Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,

@dkornel
Copy link

dkornel commented Dec 30, 2022 •
edited
Loading

@mertsincan, reading the source code (

primeng/src/app/components/tooltip/tooltip.ts

Lines 110 to 126 in 996150b

this.zone.runOutsideAngular(() => {
if (this.getOption('tooltipEvent') === 'hover') {
this.mouseEnterListener = this.onMouseEnter.bind(this);
this.mouseLeaveListener = this.onMouseLeave.bind(this);
this.clickListener = this.onClick.bind(this);
this.el.nativeElement.addEventListener('mouseenter', this.mouseEnterListener);
this.el.nativeElement.addEventListener('mouseleave', this.mouseLeaveListener);
this.el.nativeElement.addEventListener('click', this.clickListener);
} else if (this.getOption('tooltipEvent') === 'focus') {
this.focusListener = this.onFocus.bind(this);
this.blurListener = this.onBlur.bind(this);
let target = this.getTarget(this.el.nativeElement);
target.addEventListener('focus', this.focusListener);
target.addEventListener('blur', this.blurListener);
}
});
), you still does not support touch events.

can you reopen the issue ?

@mertsincan mertsincan reopened this Jan 8, 2023
@github-actions github-actions bot added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Jan 8, 2023
@cetincakiroglu cetincakiroglu removed the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Dec 28, 2023
mehmetcetin01140 added a commit that referenced this issue Dec 29, 2023
@mehmetcetin01140
Fixed #8454 - Tooltip | Touch events support for Tooltip
808c55c
@mehmetcetin01140 mehmetcetin01140 mentioned this issue Dec 29, 2023
Closed
@daniel-cpl
Copy link

Hello, touch support for the tooltip directive still hasn't been added yet, so we have to deal with ugly workarounds.

A solution would be much appreciated!

@roman-bychkov
Copy link

We need tooltips on iOS devices... Pls add 'touch' event

@nkosi23
Copy link

nkosi23 commented Sep 21, 2024

@mehmetcetin01140 @cetincakiroglu I intended to pick up the issue, but no one replied to questions I asked in the PR that was closed therefore i do not know what is needed / what was wrong with the PR that got rejected.

@nkosi23 nkosi23 linked a pull request Oct 4, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mehmetcetin01140 mehmetcetin01140

Labels
Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add
Projects
None yet
Milestone
No milestone