Chart tooltips do not activate when used in iPads set to Request Desktop Websites

[lhargil]

Describe the bug
Tapping on chart elements to activate a tooltip does not work as expected when Safari is set to Request Desktop Website in an iPad.

As I found out, it is because the navigator.userAgent string that it reports in this mode is not covered by the regex defined in the tooltip.directive.ts in order to set the appropriate timeout value.

ngx-charts/projects/swimlane/ngx-charts/src/lib/common/tooltip/tooltip.directive.ts

Line 118 in 47a07d1

: this.tooltipShowTimeout + (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) ? 400 : 0);

Instead, its navigator.userAgent string reports as:

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1 Safari/605.1.15

To Reproduce
Steps to reproduce the behavior:

1. Using the browser Safari on an iPad, navigate to https://swimlane.github.io/ngx-charts/#/ngx-charts/tooltip-templates.
2. Click on any of the vertical bars shown in the page.
3. No tooltip is shown.

Expected behavior
Regardless if Desktop or Mobile browsing mode is set iPad Safari, the tooltip should activate and show the relevant info.

Screenshots
With Safari set to "Request Desktop Website", the tooltip does not activate after tapping on the United Kingdom bar.

Demo
N/A

ngx-charts version
v21.1.0 in the link provided above, but the same bug occurs with v22.0.0, used in our app.

Additional context
Angular Version: v19.2.13

Test device settings

iPad Pro 11
OS: iOS, v17.5
Browser: Safari

[lhargil]

Proposed solution

Refactor the iOS device check to account for iPads requesting a site in Desktop mode:

const isIosDevice =
            navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) ||
            (/Macintosh/i.test(navigator.userAgent) && navigator.maxTouchPoints && navigator.maxTouchPoints > 1);

const time = immediate
      ? 0
      : this.tooltipShowTimeout + isIosDevice ? 400 : 0);

[lhargil]

Workaround
A possible workaround that can be done is to set the tooltipShowTimeout property to 500, verifying of course, using the isIosDevice check in the comment above, if the device being used by the user is an iPad.

<ng-template #theTemple>
<div ngx-tooltip 
   [tooltipDisabled]="false"
   [tooltipPlacement]="placementTypes.Top"
   [tooltipType]="styleTypes.tooltip"
   [tooltipTemplate]="tooltipTemplate()"
   [tooltipContext]="cellValue"
   [tooltipShowTimeout]="500"
>
<!-- tooltip content here -->
</div>
</ng-template>

[naveedahmed1]

I am receiving below error after upgrading to Angular 20, setting tooltipShowTimeout property to 500 doesnt seem to work.

ERROR TypeError: elementInjector.get is not a function
    at DomPortalOutlet.attachComponentPortal (portal.mjs:287:51)
    at DomPortalOutlet.attach (portal.mjs:193:19)
    at _InjectionService.appendComponent (swimlane-ngx-charts.mjs:4192:37)
    at _TooltipService.injectComponent (swimlane-ngx-charts.mjs:4042:34)
    at _TooltipService.createByType (swimlane-ngx-charts.mjs:4014:28)
    at _TooltipService.create (swimlane-ngx-charts.mjs:4010:17)
    at swimlane-ngx-charts.mjs:6637:44
    at timer (zone.js:1809:37)
    at _ZoneDelegate.invokeTask (zone.js:431:33)
    at debug_node-Dn-GvQJo.mjs:16150:55