Touch events support for Tooltip

[dandohotaru]

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

[agustinsantiago]

<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]

The workaround doesn't work for Safari iOS

[ssarkisy]

The problem still exists. pTooltip is useless for touch devices

[ssarkisy]

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]

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

[mertsincan]

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]

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]

@mertsincan, reading the source code (https://github.com/primefaces/primeng/blob/996150b2cfee11a6ccb90644e3d7ca4c6d78dfba/src/app/components/tooltip/tooltip.ts#L110-L126), you still does not support touch events.

can you reopen the issue ?

[daniel-cpl]

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]

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

[nkosi23]

@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.