Feature Discovery needs better documentation

[nh916]

I have been having a very hard time figuring out how to use the feature discovery and how to chain multiple of them together to make a walkthrough.

I really wish we had better examples that were full and showed how to use it. For example, I kept doing instances.open( ) and kept getting "method does not exist" error, after an hour of debugging I found out that its instances[0].open( ). I think our documentation could use some improvement to make it simpler for any of us to understand.

Here is the gist that I am currently struggling with to create a walkthrough for a new user
https://gist.github.com/nh916/b2a7512fbe9b4d24de8c5f909a7c6053

[nh916]

Also it seems to only work when the element is set as display: inline; and not anything else

[jshster]

Hi there, improving the documentation is one of the top priorities of the project maintainers. I myself have had some huge issues trying to understand how to implement some of the features (date picker mainly). I will add it to the maintainers discussions.

[nh916]

Worst case scenario under some of the more problematic ones we can add a link to a working codepen as a demo for someone to build off of

[ivanBell199]

Hello! Perhaps you already solved the issues you were facing. But I'd like to post here that the "menu" element needs position: relative. Then the tap-target area will be positioned correctly. However I noticed that when the menu element is somewhere in center of the page, the text is often positioned not so well. But maybe it's just my taste :) Please see the image:

You can also check out my codepen: https://codepen.io/iBeliakov/pen/Yzvogoa

[gselderslaghs]

It should be not necessary to manually trigger the element opening inside your custom scripts, the current setup of the component lacks this functionality

I'm currently working on a fix that should initialize every Feature Discovery component on the page where click handlers for Feature Discovery components will be programmatically fired

[gselderslaghs]

Changelog
Fixed auto initialization of the data-target component event handler, also fixed the the issue that when you have multiple elements and one open, you have to double click on the triggering element of another tap-target trigger before it opens

This feature is ready for review in pull-request #537

[gselderslaghs]

This has been pushed in v2.2.1, I don't think it needs better documentation from this point
Check out this Codepen example, basically the example of @ivanBell199 with newest version of Materialize, it inits all tap-targets, no need to explicitly define additional custom open/close handers, this update would make it possible to handle multiple tap-targets with Feature Discovery component within a single page, eg. tap-target per page section
@nh916 @ivanBell199 can you confirm it's working and clear from your end? Propose to close this issue

[ivanBell199]

Looks good on my end, thanks a lot 👍