2

I'm adding the following HTML snippet to my Angular 7 app, in order to add a tooltip to an element (modified from Foundation's docs):

<span data-tooltip data-options="hover_delay: 50;" 
      class="has-tip" title="Tooltips are awesome">Hello</span>

But then I get the following error in Chrome's console:

core.js:15714 ERROR TypeError: elem.getAttribute is not a function
  at Function.Sizzle.attr (jquery.js:1451)
  at Array.<anonymous> (jquery.js:1647)
  at jquery.js:2148
  at superMatcher (jquery.js:2366)
  at Sizzle.select (jquery.js:2536)
  at Function.Sizzle [as find] (jquery.js:855)
  at HTMLDocument.handlers (jquery.js:4480)
  at HTMLDocument.dispatch (jquery.js:4417)
  at HTMLDocument.elemData.handle (jquery.js:4121)
  at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)

Do you know what the reason can be?

I have the following imports in my index.html:

<script src="foundation/js/vendor/modernizr.js"></script>
<script src="foundation/js/vendor/fastclick.js"></script>
<script src="foundation/js/foundation.min.js"></script>

The exact version of Foundation I am using is 5.5.1

I found the error mentioned here but that solution of adding $(document).foundation(); didn't work for me.

Thanks.

Andrew Hill
  • 2,165
  • 1
  • 26
  • 39
Daniel
  • 21,933
  • 14
  • 72
  • 101
  • May your js files be in the wrong path? – ahmeticat Aug 06 '19 at 06:38
  • I think they are in the right paths: I can see in Chrome DevTools that it's downloading the 3 files from the server. – Daniel Aug 07 '19 at 03:34
  • Files in which path do you see? – ahmeticat Aug 07 '19 at 06:45
  • When I open DevTools, in the Sources tab, I can see 2 files inside of the `foundation/js/vendor` folder and one in the `foundation/js` folder. Is that what you are asking? – Daniel Aug 08 '19 at 02:58
  • The error is thrown by zone.js. –  Aug 11 '19 at 08:20
  • Can you provide a reproducible testcase and the exact jQuery version + Angular version? Also did you add / write additional JS code? –  Aug 11 '19 at 08:27
  • I'm using jQuery 2.1.4 with AngularJS 1.7.6, this is a production app, it has a lot of extra JS code. I'll try to put together a stackblitz that reproduces the problem. – Daniel Aug 11 '19 at 19:39
  • I put together a stackblitz and it worked ok. There is something in how my app is packaged that is causing the issues, I think I'll need to start stripping the app down until I find the problem. Though, what are some possible mistakes in my app that could lead to the problem reported above? – Daniel Aug 11 '19 at 20:52

3 Answers3

0

I would suggest to use ngx-foundation, You can achieve that simply using : 

<span [delay]="500" tooltip="Tooltips are awesome">Hello</span>

WORKING DEMO

NOTE :

With this No jQuery is required to implement with your Angular project.

MAIN-DOC / TOOLTIP-DOC

Vivek Doshi
  • 56,649
  • 12
  • 110
  • 122
  • I think I can't do taht due to incompatibility of versions: `ngx-foundation` requires `Foundation >= 6.4` but my project uses `Foundation 5.5.1`, and I read upgrading from 5 to 6 requires some work. Thanks though, I hadn't considered that option. – Daniel Aug 11 '19 at 03:42
  • Changing Dom elements via jQuery is not good option, coz that will cause issue to the angular life cycle for those elements,try to use this library if possible – Vivek Doshi Aug 11 '19 at 05:20
  • I'm not changing a DOM element via jQuery. The tooltip is a piece of static text, the same that I posted in my question. – Daniel Aug 11 '19 at 19:52
  • @MondKin, in that case, will you please create a sample on stackblitz or create a public gitrepo with issue, than I might can help you. – Vivek Doshi Aug 12 '19 at 05:42
0

I think you don't have installed jQuery, so try to install it and try to see if you get any errors, and usually you should avoid any libraries that use jQuery and find other libraries because jquery access DOM and manipulate with it but in Angular this is antipattern how you should work with Angular.

Stefan Morcodeanu
  • 2,108
  • 1
  • 11
  • 17
0

If you're initializing your popups with something like:

  $(function() {
    $(document).tooltip();
  });

it's trying to initialize popups even on those elements that don't have this functionality, thus causing an error. Try:

  $(function() {
    $('[data-toggle="tooltip"]').tooltip();
  });
Yuri Kotsar
  • 1