Tooltip Misalignment in Mobile Screens
-
I post this as a FYI in the event others hassled with the same problem. Maybe the plugin author(s) can work this issue to fix it for the next update.
The tooltip shortcode is nice, but it displays poorly in mobile screens.
As I was building the page, I wanted a tooltip for a set of 3 key words or key phrase; “Google Quality Ranking”. The tooltip was to give a short summary of what the phrase means.
In a desktop screen it works nice and great, but once I went to my mobile device (smartphone) the tool tip was half off the screen and not readable. I then went to FireFox and used the web developer tool which narrows the screen to mimic a mobile screen size (many different sizes because the width was manually adjustable).
As I manually adjusted the width of the screen, the tool tip would be in the center, then half off the screen, then off to the left too much, etc.
I noticed that when the key phrase would change positions in the line of words of the sentence ( being at the left or right or center) as the screen narrows, because as the screen narrows, the whole paragraph would naturally narrow shifting the screen position of the words.
I worked for a few hours trying to make the tooltip center to the device screen using @media, but it became a real headache, it was too inconsistent.
Custom CSS was not working and the whole attempt to fix it was getting far too complex.
Then I realized something with the tool tip positioning, it was always in relation to a few words to the left of the key phrase. When those words were at the different position on the screen, the tooltip would move and appear in relation to those words and not the key phrase.
This means, for example, if the key phrase was at the left of the screen, but the few words before it are above and to the right of the screen, the tooltip would appear over the other words at the right.
That gave me the answer to the fix. Instead of trying to hassle with a lot of @media CSS, I took a larger part of the sentence and made several words as the key phrase. Here is the example.
The marked phrase for the tool tip was suppose to be “Google Quality Ranking”
What did not work:
…your content to create an attractive [su_tooltip class=”” style=”youtube” position=”top” size=”2″ title=”Google Quality Ranking” content=”A set of guidelines Google uses to determine the ranking quality of any website, which includes the website’s content, images, responsiveness and how the content rates in mobile screens.”] Google Quality Ranking [/su_tooltip]…What fixed the positioning problem:
…[su_tooltip class=”” style=”youtube” position=”top” size=”2″ title=”Google Quality Ranking” content=”A set of guidelines Google uses to determine the ranking quality of any website, which includes the website’s content, images, responsiveness and how the content rates in mobile screens.”] your content to create an attractive Google Quality Ranking [/su_tooltip]…By taking the (italic) words and placing them with the key phrase, which was almost a length of a sentence, that solved the tooltip position issue when viewing in various mobile screen sizes.
Now the position of the tooltip was consistent (within reason) to the center of the screen because most of the sentence was always in the center of the screen no matter the screen size.
The end result was I did not have to do any Custom CSS. I used a length of a sentence to buffer the tooltip between the mobile screen sides.
The topic ‘Tooltip Misalignment in Mobile Screens’ is closed to new replies.
