Creating fixed or absolute position tooltips for iPhones and iPads: A step-by-step guide

I've been enjoying using the qTip jQuery plugin for some time now and haven't experienced any issues. However, I recently noticed a bug with the tooltips on iPads and iPhones.

Here are the symptoms I've observed:

Everything works fine until I resize the touch screen.
After resizing, the behavior becomes inconsistent. Some tooltips are misplaced without a clear pattern.

Upon diagnosis, it seems that Apple's touch screens affect the absolute and fixed positions for jQuery calls.

Has anyone else encountered this issue? I tried searching online but couldn't find any solutions specifically related to touch-screen problems.

Thank you in advance!

Answer №1

In fact, there is a misconception about tegeril being incorrect (partially). iOS 5 does indeed include support for fixed position while iOS 4 does not. May I inquire about the specific version of iOS that you are currently using?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having difficulty accessing the selected input value from window.localstorage

javascript jquery html

Struggling to conceal the elusive x button that resets the input field

There is an X box that always appears, which I use to clear the text. However, I would like this X box to only appear when the input has focus and then hide after a word has been entered. Currently, it is visible all the time. https://i.sstatic.net/6Owwi. ...

javascript html jquery bootstrap-4

How come it is not possible for me to choose all elements containing an attribute value saved in a variable?

Imagine you have the following snippet of HTML code: <div data-id=5>...</div> <img data-id=5 src=...> <input data-id=5 ...> ... Your task is to select and remove all elements with the attribute data-id set to 5. Here is one attemp ...

javascript jquery html

Tips for ensuring my jQuery textarea Focus event does not fire continuously for an endless number of times

In my project code, I have a basic JavaScript jQuery code snippet that is supposed to be called only once. However, whenever I click my mouse cursor into the textarea attached to the event, it alerts more than 100 times! projectTaskModal.cache.$cmtTextare ...

javascript jquery jquery-events

Using jQuery Ajax function to submit the entire form as data

I'm working with a jQuery ajax function and I want to send the entire form as post data. It's a hassle keeping up with all the updates to the form, as it requires constantly updating which form inputs need to be included in the request. ...

jquery ajax

Troubleshooting date format errors when parsing two parameters in a jQuery AJAX request

Does anyone have advice on how to make an ajax call with two parameters - number and date? I encountered the following error: Warning: date_format() expects parameter 1 to be DateTimeInterface, boolean given in... Here is the HTML code involved: <di ...

javascript php jquery ajax

Tips for creating a scrolling iFrame that moves with the background

I have recently created a website with a unique design feature. The background image acts as a border surrounding the main content, which is located within an iFrame. However, I've encountered an issue where scrolling the iFrame does not affect the ba ...

css scrollbar html

Aligning two floating elements vertically in respect to each other

Although the topic of vertically centering elements is common on various websites, I am new to HTML and still find it confusing even after doing some research. I attempted to create a basic header element for a website that includes an h1 title and a navi ...

html css vertical-alignment

Receiving a “parsererror” in JQuery while attempting to utilize Ajax functionality on IE 6

When I make a jQuery Ajax request, Internet Explorer 6 gives me a parseerror while Firefox works without any issues. This is the code I am using: $.ajax({ url: 'test.xml', type: 'GET', dataType: 'xml', error: fu ...

jquery ajax internet-explorer-6

Change to a different button based on a condition in ReactJS

Currently, I am tackling a ReactJS project that involves the utilization of the following function: function checkMoves() { let index = 0; let moveList = []; while (index < props.moves.length) { if (!moveList.includes ...

html css reactjs

Tips for interpreting a JSON object that has been returned

I'm currently working on creating a notification system. The process involves running an AJAX call that executes a PHP script to select all 'message' items where 'new=1'. The PHP array is then returned to the JavaScript function vi ...

php javascript ajax json jquery

What is preventing this brief code from functioning properly? I am trying to extract a value from an input field and add it to a div element

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="//ajax.googleapis.com/ajax/libs/jque ...

javascript jquery html

What is the best way to apply fading effects to three divs containing additional divs?

Looking at this HTML and CSS code: HTML <DIV class="newsPic"></DIV> <DIV class="newsPicTwo"></DIV> <DIV class="newsPicThree"></DIV> CSS .newsPic { width: 500px; height: 200px; } .newsPicTwo { width: 500px; height: 2 ...

javascript jquery html css animation

SOLVED: How to utilize CSS to confine scrollbars within nested div elements

As a novice in web programming, I am currently working on a userscript to add hotkeys to a website. I am using Firefox on Linux for this project, focusing solely on desktop functionality. Right now, my main focus is on enhancing the pop-up help view, which ...

html css scrollbar

Creating a universal representation of the global object in JavaScript that is not tied to any specific implementation

Looking to define the global object in JavaScript with just one line of code: var global = this.global || this; This statement is within the global scope, meaning that in browsers, the this keyword refers to the window object. If this is the first line o ...

javascript jquery node.js global commonjs

Retrieving CSS content and resolving image references from external CSS files for the Link Validator

Currently, I am developing a Link Validator tool designed to analyze and validate all links within a specific domain based on a given seed page. For instance, when analyzing http://www.example.com/, the tool should assess all links associated with example. ...

java css web-applications jsoup

What could be causing the visibility issue with my navigation items in the bootstrap navigation bar?

Currently, I am experiencing a puzzling issue with the navigation bar on my live website. The navigation items seem to flicker for a brief moment and then disappear entirely. This unexpected behavior is certainly causing me some concern. I crafted the us ...

javascript html css web logic

Is there a way to align the input fields vertically?

Here is the link to my code on jsFiddle input { vertical-align: top; /* Not working */ } I am struggling to align the submit button under the input fields. Can someone provide assistance with this issue? ...

html css

unable to record the input value in jquery

Snippet for HTML code: <div id="Background"> <input id="search-Bar" type="text"> <button id="SearchButton">Search</button> </div> var name = $("#search-Bar").val(); $("#SearchButton").on("click", function() { co ...

javascript jquery html

Error: fancytree struggling to load JSON data

I've been working on using fancytree to display data fetched from a PHP REST service. The data has been validated through JSONLint and is in the correct format according to fancytree documentation. However, when I have the developer tools open in Chr ...

php jquery json loading fancytree

CSSer Q&A