IntroJS Tooltip Not Displaying Correctly on iOS 18

[locmaymo]

Description:
I'm encountering an issue with IntroJS tooltips not displaying correctly on iOS 18. I tested this using an iPhone 14 Pro Max to view my website, which uses IntroJS. The first tooltip appears as expected, but when it moves to step 2, the tooltip does not display. I also tested this on the official demo page of IntroJS, and the issue persists there as well.

Additionally, I tested on BrowserStack with an iPhone 16 Pro Max running iOS 18, and the same behavior occurred.

This issue seems to only occur on iOS 18, as everything works fine on other platforms and iOS versions.

Steps to Reproduce:

1. Use an iPhone 14 Pro Max running iOS 18.
2. Access a website or the official demo page of IntroJS.
3. Begin an IntroJS tour.
4. Observe that the first tooltip appears correctly.
5. Proceed to the second step, and notice that the tooltip does not show.

Expected Behavior:
The tooltips should display correctly for every step in the tour, including step 2 and beyond.

Actual Behavior:
The tooltip only appears for step 1 and does not display for subsequent steps on iOS 18.

Devices Tested:

• iPhone 14 Pro Max (iOS 18)
• iPhone 16 Pro Max (iOS 18) via BrowserStack

[nutpun]

I found this issue on macOS safari 18.0.1 I think it happened on mac or iphone that use safari 18

[nutpun]

Can you try?

//hot fix missing tooltip on IOS 18
.introjs-tooltipReferenceLayer {
    visibility: visible;
}

[nesha14586]

Can you try?

//hot fix missing tooltip on IOS 18
.introjs-tooltipReferenceLayer {
    visibility: visible;
}

This worked for me, but I had to add !important.

Thank you!

[SavvasMohito]

Can you try?

//hot fix missing tooltip on IOS 18
.introjs-tooltipReferenceLayer {
    visibility: visible;
}

Thank you, this worked for me too!

[EliteXCoder1]

Can you try?

//hot fix missing tooltip on IOS 18
.introjs-tooltipReferenceLayer {
    visibility: visible;
}

This worked for me, but I had to add !important.

Thank you!

I ran into the same issue and this worked for me, thanks!

[WilcoVertegaal]

Hotfix works for me, thanks.

Does the hotfix break the Android version, or older versions of iOS?

[EliteXCoder1]

Hotfix works for me, thanks.

Does the hotfix break the Android version, or older versions of iOS?

I haven't seen any issues in android or older ios versions so far so i think the hotfix should be fine.

[jcapogna]

The hotfix CSS worked for me as well.

[Alex870]

The CSS hotfix rendered the entry fields on a Bootstrap 4 modal dialog uneditable.

[AtomR]

The CSS fix prevents highlighted elements from being interactive.

[luismoyano]

For the record, happens as well in Safari with Sequoia

[skrobot]

Can you try?

//hot fix missing tooltip on IOS 18
.introjs-tooltipReferenceLayer {
    visibility: visible;
}

This worked for me, but I had to add !important.

Thank you!

This hotfix worked for iOs 26 as well

[skrobot]

If hotfix blocks your interactive elements like inputs or google map markers just add a dummy div right before the element. The bubble will be positioned right next to the correct place.

<div class="dummy-introjs-step" id="step-C4"></div>

[Tiitan]

The style fixed it for me too.. but @nutpun, could you explain why it works and why it is required ?