How to create fixed/absolute position Tooltips on iPhones and iPads?

Question

For some time now I've been happily using the qTip jQuery plugin. No complaints there. However, on iPads and iPhones, the tooltips appears to be buggy.

Symptoms:

• Before resizing the touch screen everything seems to be working fine.
• After resizing etc. -- Inconsistent behavior. Some tooltips are misplaced; no real logic there.

Diagnosis: It seems to me that Apple's touch-screens f**k-up the absolute and fixed positions for all jQuery calls.

How do I get by this? Anyone got into it? I googled the thing; couldn't find anything regarding this specific touch-screen issue.

Thanks!

Answer 1

Would you be so nice to post your tooltip-configuration? I have the same problem: My qTip-Tooltips work great on any PC-browser. But on the iPad, I observed two side-effects:

1. They are sometimes displayed at the wrong place. After a while (about one to three seconds) the position is corrected.
2. The tips sometimes do not appear. I have to tap three or more times until I see the tooltip.

These problems are independent on any rotation of the iPad. Has anybody found a workaround for this?

My qTip-Version: 1.0.0-rc3 This is my configuration:

var tooltipSettings = {                         
                        content: '<h3>Title</h3>Content',
                        style: {
                            name: 'light',
                            border: {
                                radius: 5,
                                width: 1
                            }
                        },
                        position:{
                            corner:{
                                target: 'bottomRight',
                                tooltip: 'leftTop'
                            },
                            container: $('#' + this.parentContainerID)
                        },
                        show: {
                            when : 'mouseover click',
                            solo: true
                        }                   
                    };