Foundation-sites: Dynamically created tooltip are not working.

[johnraz]

To reproduce:
Go to the tooltip documentation page and do this in the console:

$('body').prepend('<span data-tooltip class="has-tip" title="Tooltips are awesome, you should totally use them!">extended information</span>')

The link created on the top of the windows should be a valid tooltip but its not, instead I have to manually trigger the $(document).foundation() call again to make it work...

Reading #3955, delegation of event should take care of this.

I don't have time to dig this right now so if you have any clue to speed my research, please let me know ;)

[johnraz]

Could be related to #462, but seem old to be still around.

[nesl247]

Unless something changed, I believe this still has to do with the fact that foundation only seems to care about elements that existed when foundation was initialized. The same issue exists for dropdowns, and probably other features as well.

The issue comes down to the init is searching the DOM for elements, instead of using $(document).on(...).

See: https://github.com/zurb/foundation/issues/4827

[omarkhd]

Same issue here with dropdowns, I have to call $(document).foundation() again to make them work.

[rafibomb]

Have you tried reflow? $(document).foundation('tooltip', 'reflow');

[JeffML]

I did. It works.

[axelson]

@rafibomb that is not fixing it for me. But maybe my problem is that my tooltip is on an SVG text element.

[ravindrasinghshah]

Have you tried this?
$(document).foundation('tooltip');

[zurbrandon]

Yeah you can't append to an SVG element. There are libraries that help with that though. Refow won;t work with the SVG on its own.

[Sinetheta]

Are you kidding me, the answer is "we hid a noop in tooltip.js to trick you into re-initializing the world"? Why close this issue when the answer is "we know, working as intended".

[rafibomb]

@Sinetheta Regarding the original issue, what's your suggestion?

[Sinetheta]

Sorry there's not a lot to say @rafibomb. Having a quick look through the source shows that someone went to a lot of trouble to _avoid_ having plugins work on dynamic content. https://github.com/zurb/foundation/blob/master/js/foundation/foundation.js#L107

I mean, I guess that's a nice way to be able to say "just run $.fn.foundation and we'll be as judicious as possible with our startup", but I don't think that kind of user is really going to be min-maxing their load time anyways.

Modules are great, but make it explicitly controllable or don't do it at all, because at first glance it looks to me as though the tooltips run on a single delegated event handler. If they weren't being hamstrung by the init process they'd work just fine as is.

[rafibomb]

@Sinetheta I have no doubt this code was not built with this use case in mind. Having said that, we are working on the next version and the JS will be re-written. Dynamically loaded content will be kept in mind as they are built out. And thanks for the explanation.

[Sinetheta]

Gotcha, I see the issues for that now https://github.com/zurb/foundation/issues/6197

I'll keep my eyes open for a new branch then.

[JeffML]

Regarding $(document).foundation('tooltip', 'reflow'): really slow on IE, FF if a lot of tooltips have been added dynamically. Trying setTimeout(..., 0) doesn't work as reflow is locking up the page until it's finished.

[steoo]

Not working for me too on 5.4.6

[tedivm]

Three years later and this still isn't resolved, but even worse none of the workarounds on this page even work.

[steoo]

I'm still trying to drop foundation out of my project and still paying the
consequences. This is one of the most disappointing project I've ever used

On Jan 31, 2018 21:42, "Robert Hafner" [e-mail] wrote:

Three years later and this still isn't resolved, but even worse none of
the workarounds on this page even work.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/zurb/foundation-sites/issues/5503#issuecomment-362063836,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADLdxYeJN4Ckt8udiBProFaYGBPmLUEoks5tQNAbgaJpZM4CRPS-
.

[tedivm]

The fact that they closed this issue, and all of the other issues related to this problem, without bothering to fix it is pretty problematic. I can understand why you'd stop using this project after that.

[tedivm]

I opened a new issue, #10898, so lets see if this does somewhere.

[steoo]

I cannot count the number and variety of problems I had with foundation javascript library and css nonsense approach unfortunately found out only when already commited to it.

[julienc91]

I was having a hard time with this behaviour as well, and unfortunately I cannot get rid of Foundation for the moment...

I "patched" foundation.tooltip.js this way (I'm (still...) using Foundation 5.5.3):

@@ -213,6 +209,14 @@
       $target.removeAttr('title').attr('title', '');
     },

+    update : function ($target) {
+      if ($target.attr('title')) {
+        $('#' + $target.attr(this.attr_name())).remove();
+        this.create($target);
+      }
+    },
+
     reposition : function (target, tip, classes) {
       var width, nub, nubHeight, nubWidth, column, objPos;

This method checks if the target has an updated title attribute. If this is the case, it deletes the current outdated tooltip, and then runs the create method on it to update the tooltip's text. The create method takes care of removing the title attribute` on the target, so that this step won't be necessary next time.

To call the update method:

$(document).find('[data-tooltip]:not([title=""])').each((_, e) => {
    $(document).foundation('tooltip', 'update', $(e));
});

[Phuonglv123]

you can try
$("body").tooltip({selector: '[data-toggle="tooltip"]'});

[DanielRuf]

@Phuonglv123 you commented on an already solved issue which is 4 years old.

Things have changed since then.

[tedivm]

Four years may have passed but this issue is still unsolved as far as I can tell. Looks like there's a PR open to try and resolve it but with no changes since February 26th.

For the record this issue, the fact that it was closed, and the fact that the new issues opened are also being ignored is why I stopped using Foundation.

[steoo]

I'm sorry to say that, especially about an open source project, but Foundation created more problems than it solves in my case. I'm slowly migrating everything to custom things or other libraries because there are lots of problem in Foundation approach.

[ncoden]

Planned for v6.6.0

[SassNinja]

@tedivm one year has passed since your first comment to this issue and how much have you contributed to this framework? Nothing, not even forked!
Open source doesn't mean you get everything you ask for without doing anything.
So instead of complaining you could have used the time to create a PR solving the issue or help with the one in talk.

@steoo same to you: your fist comment to this issue was more than 3 years ago and you haven't contributed anything yet and not even forked this repo either!

I'm slowly migrating everything to custom things or other libraries

Means in the end you need to write code yourself anyway (just not for Foundation) or are dependent on another project again what will only work as long as there are enough developers taking care of all unpaid requests.

back 2 topic:

I've just gone through the whole issue and think there are two problems:

1. changing the title of an existing tooltip doesn't work (sth as reflow or reinit is missing) – possible fix in https://github.com/zurb/foundation-sites/pull/10957/files
2. adding a new tooltip to DOM always requires to initialize it (either via foundation() or via new Foundation.Tooltip()) and can't work as expected by @johnraz

The latter can not be fixed because it's caused by the architecture of Foundation. Each tooltip is an individual plugin instance and therefore has to get initialized. Just adding a new tooltip elem without taking care of it doesn't work by design.

Maybe something we might consider for Foundation v7 @ncoden ?

[SassNinja]

here's a codepen I've made to play around with dynamic tooltips:
https://codepen.io/KaiTheGreat/pen/pqEaqB

[steoo]

@SassNinja it doesn't mean that you have to ignore the issue at all either. If someone asks about a behaviour the maintainer should at least respond; I'm answering three years later because someone also did but in the meantime, as I said, I worked around the bug, I've no interest in collaborating in something that, to me, is broken, because this is not the one and only problem I had with this "framework". I'm not blaming you, just said that this project is not the right fit for me and, maybe, for somebody else.

[DanielRuf]

@SassNinja it doesn't mean that you have to ignore the issue at all either. If someone asks about a behaviour the maintainer should at least respond

We can and do not always respond to all issues as we are volunteers and also work on other projects. Sorry but I think you are not aware of how it is to be a maintainer, answer issues, create PRs, test things, ...

It costs much energy. GitHub is a collaboration platform and opensource is a product of many volunteers providing their free time to help to create better products together.

We did not ignore this issue. It was stale for a long time and we have no PR so far (we would have to think about and test a solution).

@SassNinja provided some possible ways for a solution.

[DanielRuf]

In general, you can easily listen for dynamically added elements and then initialize the elements (there are observers in native JavaScript) and it also works with custom events, see https://github.com/DanielRuf/noopener/blob/master/src/index.js

[DanielRuf]

Have you tried reflow? $(document).foundation('tooltip', 'reflow');

As others wrote, this fixed the initial issue. So I think we can close this ticket here.

I would say we should close this issue and create a new one with a proper codepen and description as we have none in this one and there are different things mentioned.

@ncoden what do you think?

[DanielRuf]

here's a codepen I've made to play around with dynamic tooltips:
codepen.io/KaiTheGreat/pen/pqEaqB

Looks very promising and works great.

[tedivm]

Until @DanielRuf made his snarky comment about this issue being four years old and no longer relevant I was being quiet, but once he tried to shut this conversation down I pointed out that the issue was still valid.

On top of that though I actually did go ahead and open a new issue (#10898), which resulted in this PR (#10957), which in turn has been completely ignored- despite people tagging @DanielRuf.

So I totally get that open source software (of which I've written a lot) depends on contributions, but if you want contributions you've got to be an open community and you've got to actually manage those PRs. Making snarky comments and shutting down threads while the issues are still relevant is not very inviting. Ignoring requests for feedback on open PRs, and then ignoring that PR for almost a year, is not going to encourage people to make more PRs. No one is going to contribute when the gatekeepers for the project ignore those contributions.

Honestly though I've already moved away from Foundation, and with the responses coming from the "collaborators" on the project I am extremely grateful that I did.

[DanielRuf]

We do not ignore things, many (including me) do not work fulltime on Foundation and Foundation projects.

Closing old issues and creating new ones helps us to get all current information - we gave a clear issue template now.

Also your linked issue is not the exact same issue so these are two different things.

[DanielRuf]

But it seems you also did not try my proposed and quoted solutions.

We do not know what exactly you have tried so far. And we had no more information (setup, example code, Foundation version and so on).

https://github.com/zurb/foundation-sites/issues/5503#issuecomment-362063836 is more like "I have this problem too" but there are no more details. Many parts of Foundation have been changed and fixed in the last 4 years. So this is not very helpful for us to make a reproducable test and know what you've exactly tried.

So far calling $(document).foundation() to initialize dynamically added components (or just the single and newly added component - at least in React we have componentDidMount and so on) is and was unproblematic in my cases and projects.

[DanielRuf]

Also at https://github.com/zurb/foundation-sites/pull/10957#issuecomment-368677386 we await feedback from the contributor (see the PR review).

We've merged many PRs and closed many outdated and resolved issues for all releases after 6.4.3, so we work on things and don't ignore them.

[DanielRuf]

@tedivm https://github.com/zurb/foundation-sites/issues/5503#issuecomment-448179129

Is this a possible solution for your issue? Do you have ideas how we can observe / listen for newly added elements and initialize them in Foundation? I've proposed a solution at https://github.com/zurb/foundation-sites/issues/5503#issuecomment-448222220

[DanielRuf]

I've closed this issue because we did not receive any further feedback or reports regarding this. Please create a new issue with thr issue temple if this is still broken in 6.5.3.