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

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!

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 18 (11 by maintainers)

Most upvoted comments

Hi @mtomov,

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

DanielRuf on Jul 29, 2019

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:

Run _init in the get and atLeast methods if queries is empty.
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.

merlinstardust on Feb 18, 2016