[Tooltips] Instantiating tooltips recommended way doesn't seem to work (Meteor)

[DevanB]

We are following the documentation on Atmosphere and not using $(document).foundation(), but instead are instantiating plugins using the Foundation plugins API. This works fine with our Reveals, Accordions and several other plugins, however, is not working with Tooltips. The tooltips will work when you use $(document).foundation(), but we need more control over the plugins. Below is how we are using tooltips:

<span id="messageTooltip" data-tooltip aria-haspopup="true" class="has-tip top" data-disable-hover='false' tabindex=1 title={{message}}>{{shorten message}}</span>

Template.generalTasksTable.onRendered(function () {
  this.tooltip = new Foundation.Tooltip($('#messageTooltip'));
});

Template.generalTasksTable.onDestroyed(function () {
  let tooltip = this.tooltip;
  if (tooltip) {
    tooltip.destroy();
  }
});

We have also tried targeting the .has-tip class as well, but no luck with that also. Just to make sure we aren't doing anything odd with Meteor, I have tried var tooltip = new Foundation.Tooltip($("#messageTooltip")); in the Chrome console, but that yielded no tooltips as well.

Thanks for any help!

[juliancwirko]

It is initialized, there is a Tooltip instance. There is even additional DOM node created for it, but it isn't showing on hover, on click too. Altought isClick attr is changing to true but isActive is always false. The this.tooltip.show() does nothing too (http://foundation.zurb.com/sites/docs/tooltip.html#js-functions)

Question to Zurb team: What this is responsible for? This always return false in this case so this.tooltip.show() is blocked.

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

  (...)

}

Because of the above we can't do something like:

Template.generalTasksTable.events({
    'mouseover #messageTooltip': function () {
      var tmpl = Template.instance();
      tmpl.tooltip.show();
    }
  });

Also I think that after initialization it should be auto binded with show() and hide() (and maybe it is, I don't know exactly)

[DevanB]

@juliancwirko Where you able to get this working locally by modifying the library? I'm going to have to make this a local package and change stuff to make it work, till the package is fixed.

[juliancwirko]

Actually I can't make it work. I think there is a bug in the Tooltips or something else is blocking it. Tooltip.prototype.show is not fired in this case because it is blocked at the beginning and I don't know what this if statement is:

if(this.options.showOn !== 'all' && !Foundation.MediaQuery.atLeast(this.options.showOn)){
    return false;
}

I think someone from Foundation team might look into it.

[Harti]

This doesn't work for me either in 6.1.1. I'm using the exact markup from the docs, am calling $(document).foundation() and included all required JS and SASS dependencies.

You can manually set the respective tooltip's style attribute to "display: block;", and if you mouseout, it'll be set to "display: none;" (after reducing its opacity). However, the mouseover event doesn't seem to be fired.

As a workaround, I am currently using this approach:

$(document).on("mouseover focus", ".has-tip", function()
{
    var id = $(this).attr("data-yeti-box");
    $("#" + id + ".tooltip").appendTo($(this)).fadeIn();
});

[DevanB]

@Harti Are you using Meteor as well?

[Harti]

@DevanB I apologize for having added some confusion; I'm not using Meteor. (In fact I overlooked that you were using Meteor at all)

My issue may be completely unrelated to what is happening here, but I felt that there might be something odd with the underlying code base of Foundation not setting the mouseover listeners correctly, even through the direct API calls you are making.
For me, the tooltip DOM nodes are appended to the body, there is a JS object instance and the tooltips will fade out when you mouseout, but they won't fade in when you mouseover, just like described in this thread.

This could be a bug completely unrelated to Meteor.

[DevanB]

No problem. The issue looks to be with Foundation.Tooltip, not Meteor itself. Hopefully the awesome Zurb-ians are working on a solution.

[merlinstardust]

A simple fix is to set showOn: 'all' until Zurb fixes the code.

As @juliancwirko said, the issue starts with this line

if(this.options.showOn !== 'all' && !Foundation.MediaQuery.atLeast(this.options.showOn)){
    return false;
}

I looked at the MediaQuery util and found some odd things which are likely preventing it from firing.

They use this line to extract the styles, but when I run it in the console, I get undefined.

var extractedStyles = $('.foundation-mq').css('font-family');

However, on the Foundation Docs page, the same line returns

"'small=0em&medium=40em&large=64em&xlarge=75em&xxlarge=90em'"

which comes from a meta class that is attached when you run Foundation on the entire page. Running Foundation also initializes the MediaQuery class. And since we're initializing per template, we don't get these.

So, I think a good solution would be to:

1. Run _init in the get and atLeast methods if queries is empty.
2. Extend the defaultQueries object to include small, medium, large, xlarge, and xxlarge queries and then use the defaultQueries if no meta class is found.

I'll go do this and create a pull request.

[kball]

Reopening as the PR resulted in other issues and had to be reverted for now.

[IamManchanda]

As per discussion at vue-foundation/vue-foundation#18 (comment)
@kball Any updates on this ??

[kball]

Hmm... I don't have any updates right now, but I can definitely take a look at it this week before 6.4 rcs... @IamManchanda do you have a codepen/testcase that repros?

[IamManchanda]

do you have a codepen/testcase that repros?

No...

[DanielRuf]

I can not reproduce this with 6.4.4

https://codepen.io/DanielRuf/pen/ZxbXWR

Does this issue still occur?

[DanielRuf]

I closed this issue as we did not receive any further feedback and we can not reproduce it with newer releases.

[mtomov]

Foundation 6.5.3

I can only get the tooltip to show if I have

Foundation.Tooltip.defaults.showOn = 'all'

The tooltips are generated and all, but I can't get them to come up on page.

Tried removing a bunch of things, including fonts, but couldn't find out what's causing to to behave like this 🤷‍♀️

[DanielRuf]

Hi @mtomov,

can you open a new issue and fill out the issue template with all relevant details?

[raray]

@mtomov I had the same problem and, for me, it turned out to be that I was loading JS before CSS which breaks how Foundation handles reading media query breakpoints in the JS: https://foundation.discourse.group/t/problem-with-tooltip-and-showon/1615/6

[DanielRuf]

@raray in general css should be loaded in the head and js right befote the closing body tag. Everything else hurts the performance and produces issues.