I have been experimenting with customised tooltips, using :hover via TemplateStyles. When I include such elements inside a wikitable with a caption, this caption seems to be affected by my tooltip. On the PC everything is fine; but when I’m on my tablet (both desktop and mobile version) or my mobile device (only desktop version!), whenever I activate the tooltip by tapping on the element, the table caption keeps jumping downwards with every tap, hiding parts of the table and not even stopping at the bottom of it. Any ideas which CSS definitions could be causing this effect, and why it is only happening on tablets and mobile devices (desktop-only)?
Topic on Extension talk:TemplateStyles
When you tap on an element, it becomes focused, so any CSS selectors with `:focus` are applied, and the browser also adds an outline for some elements (not captions, normally, but maybe it has a link inside, has a tabindex attribute etc). Outlines are like borders but are outside the element and so increases element size, possibly causing it to be reflown into another line. You can set `...:focus { outline: none; background-color: ... }` to highlight the element in a different way (again, this element might not be the caption itself).
The difference with desktop is that hovering does not count as focus (mobile devices do not have separate gestures for "hover" and "click" so they handle taps as a mix of the two). If you click on the caption you should see the same behavior, if I'm not wrong about the cause.
Hm, thanks for the explanations. I have tried several things now, the error is still there. Clicking in the desktop version does not lead to the described behaviour (has no effect at all). The jumping caption seems to be only one symptom of a larger problem that could root back to browser incompatibilities, special iOS behaviour, some MediaWiki default styling definitions, but also to TemplateStyles (which is why I first asked here). Probably there is a better place to discuss this, I am happy to continue somewhere else, but let me give some more details first.
I have now rewritten the CSS, strictly following the demos on http://www.menucool.com/tooltip/css-tooltip. Since the tooltips on that page behave as expected on all devices I tested (iPad, iPod touch, Android phone: tooltip shows on tap and vanishes after tapping anywhere outside; PC: normal hovering), the problem must be MediaWiki-related. Using the CSS (directly or in a template) via TemplateStyles leads to the following problems:
- if in a table (not necessarily wikitable), the caption jumps downwards when tapping the tooltip container (I have normal behaviour in (1) mobile version on iPod and Android phone, (2) desktop version on Android phone; it jumps in (1) mobile version on iPad, (2) desktop version on iPod and iPad);
- tooltip does not vanish when tapping somewhere outside (works only if I tap outside of the page content, basically within the toolbar areas of desktop version; normal behaviour on Android phone; problem on iOS devices, desktop version);
- if container area is only text, iOS devices show no tooltip at all (not tested on Android), it needs to be a link or an image (I am using icons, so at least that does not affect me); but again, the demo version, which uses only text, works also on iOS devices.
It comes as no surprise to me that iOS behaves differently, but if the CSS works outside of MediaWiki, I see no reason for the sudden problems here. If this issue has larger dimensions, I am happy to continue on Phabricator or somewhere else, then I could also give some more concrete examples.
Well, MediaWiki is not a CSS-free environment, it probably interferes with some other rules... you can try moving the CSS to MediaWiki:Common.css or some other global location to see if it is related to TemplateStyles.
Okay, have tested it now on testwiki (thanks for the tip, I didn’t think of my personal common.css)! Since the behaviour is the same if the CSS is coming from the common.css, we can exclude that the problems are related to TemplateStyles. I will file a report on phabricator then, I guess!
Okay, now phab:T212610! I will mark this here as resolved then.