Problem with Tooltip and `showOn`

Tooltips were broken in our app after upgrading from 6.5.3 to 6.6.1. I traced the issue to the following lines in Tooltip.show():

if (this.options.showOn !== 'all' && !MediaQuery.is(this.options.showOn)) {
  // console.error('The screen is too small to display this tooltip');
  return false;
}

Ultimately, it appears that MediaQuery.is() uses MediaQuery.atLeast() which uses MediaQuery.get() which returns null if we haven’t configured any queries and thereby cascades false all the way back up.

I don’t see anything in docs (might be missing it) about queries needing to be configured in order for tooltips to work. Passing showOn: 'all' fixes the immediate problem, but can I get some clarity on the intention behind this change so I can know whether to expect breaking changes like this in the future (or if I’m completely missing something)?

Thanks!

What does your settings look like? The standard media query names are required.

I think it was broken in 6.5.x and we fixed it in 6.6.x.

I don’t have any settings for the JS. I’m currently doing:

import 'foundation-sites';

$(document).foundation();

I meant your scss (breakpoints).

I see this line: $breakpoint-classes: (small medium large xlarge xxlarge);

I did not set up that portion of the project.

How did you install 6.6.1? With npm?

Can you provide a small reproducible testcase as repository with the project setup?

Hey again, Daniel.

I undertook to create an example repo but was unable to recreate the problem. However, your question about the SCSS breakpoints kept gnawing at me, so I dug into the Foundation code deeper. I learned that the Foundation JS is reading the CSS breakpoints from the font-family CSS of a <meta> tag in the <head>. The problem turned out to be that our JS was being loaded before our CSS which meant that the font-family being read was not in the expected format and thus resulted in a malformed MediaQuery.queries array.

So, my problem is solved, but I have a couple suggestions:

  1. Add in some safety to the breakpoint/font-family reading by prepending an expected string that must be present to allow storage of the queries. Then, recheck later if the array is empty when trying to use it.
  2. Make it very clear, somehow, that CSS needs to be loaded before JS.

Thanks for you help! Sorry about being terse yesterday - I was working on another task while also looking into this.

This is basically a requirement for any frontend project and also mentioned in our docs.

This is not a solution for us because the scss file may have different settings and this could lead to a shift in the layout in some cases.

This is basically a requirement for any frontend project and also mentioned in our docs.

Also see https://get.foundation/sites/docs/media-queries.html#javascript

This is not a solution for us because the scss file may have different settings and this could lead to a shift in the layout in some cases.