Feature Discovery

Provide value and encourage return visits by introducing users to new features and functionality at contextually relevant moments.

Feature discovery prompts have more impact when they are presented to the right users at contextually relevant moments. When presented to the wrong user at the wrong time, they can be intrusive and annoying.

Open tap target    Close tap target

                                    
                                        <!-- Element Showed -->
                                        <a id="menu" class="waves-effect waves-light btn btn-floating" ><i class="material-icons">menu</i></a>

                                        <!-- Tap Target Structure -->
                                            <div class="tap-target" data-target="menu">
                                                <div class="tap-target-content">
                                                <h5>Title</h5>
                                                <p>A bunch of text</p>
                                            </div>
                                        </div>
                                    
                                

Initialization

                                    
                                        var elem = document.querySelector('.tap-target');
                                        var instance = M.tapTarget.init(elem, options);

                                        // Or with jQuery

                                        $(document).ready(function(){
                                            $('.tap-target').tapTarget();
                                        });
                                    
                                

Options

Name	Type	Default	Description
onOpen	Function	null	Callback function called when feature discovery is opened.
onClose	Function	null	Callback function called when feature discovery is closed.

Methods

Because jQuery is no longer a dependency, all the methods are called on the plugin instance. You can get the plugin instance like this:

                                    
                                        var instance = M.tapTarget.getInstance(elem);

                                        /* jQuery Method Calls
                                            You can still use the old jQuery plugin method calls.
                                            But you won't be able to access instance properties.

                                            $('.tap-target').tapTarget('methodName');
                                            $('.tap-target').tapTarget('methodName', paramName);
                                        */
                                    
                                

.open();

Open Tap Target

                                    
                                        instance.next();
                                        instance.next(3); // Move next n times.
                                    
                                

.close();

Close Tap Target

                                    
                                        instance.close();
                                    
                                

.destroy();

Destroy plugin instance and teardown

                                    
                                        instance.destroy();
                                    
                                

Properties

Name	Type	Description
el	Element	The DOM element the plugin was initialized with.
options	Object	The options the instance was initialized with.
isOpen	Boolean	If the tap target is open.