-
Notifications
You must be signed in to change notification settings - Fork 5.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Tooltips] Instantiating tooltips recommended way doesn't seem to work (Meteor) #7554
Comments
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 Question to Zurb team: What this is responsible for? This always return false in this case so this.tooltip.show() is blocked.
Because of the above we can't do something like:
Also I think that after initialization it should be auto binded with show() and hide() (and maybe it is, I don't know exactly) |
@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. |
Actually I can't make it work. I think there is a bug in the Tooltips or something else is blocking it.
I think someone from Foundation team might look into it. |
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:
|
@Harti Are you using Meteor as well? |
@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. This could be a bug completely unrelated to Meteor. |
No problem. The issue looks to be with Foundation.Tooltip, not Meteor itself. Hopefully the awesome Zurb-ians are working on a solution. |
A simple fix is to set As @juliancwirko said, the issue starts with this line
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
However, on the Foundation Docs page, the same line returns
which comes from a So, I think a good solution would be to:
I'll go do this and create a pull request. |
Reopening as the PR resulted in other issues and had to be reverted for now. |
As per discussion at vue-foundation/vue-foundation#18 (comment) |
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? |
No... |
I can not reproduce this with 6.4.4 https://codepen.io/DanielRuf/pen/ZxbXWR Does this issue still occur? |
I closed this issue as we did not receive any further feedback and we can not reproduce it with newer releases. |
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 🤷♀️ |
Hi @mtomov, can you open a new issue and fill out the issue template with all relevant details? |
@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 |
@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. |
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: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 triedvar tooltip = new Foundation.Tooltip($("#messageTooltip"));
in the Chrome console, but that yielded no tooltips as well.Thanks for any help!
The text was updated successfully, but these errors were encountered: