Tooltip

Tooltips are small, interactive, textual hints for mainly graphical elements. When using icons for actions you can use a tooltip to give people clarification on its function.

Add the Tooltipped class to your element and add either top, bottom, left, right on data-tooltip to control the position.

Bottom Top Left Right

                                    
                                          <!-- data-position can be : bottom, top, left, or right -->
                                          <!-- data-delay controls delay before tooltip shows (in milliseconds)-->
                                          <a class="btn tooltipped" data-position="bottom" data-delay="50" data-tooltip="I am a tooltip">Hover me!</a>
                                    
                                

Initialization

                                    
                                        var elem = document.querySelector('.tooltipped');
                                        var instance = M.Tooltip.init(elem, options);

                                        // Or with jQuery

                                        $(document).ready(function(){
                                            $('.tooltipped').tooltip();
                                        });
                                    
                                

Options

Name	Type	Default	Description
exitDelay	Number	0	Delay time before tooltip disappears.
enterDelay	Number	200	Delay time before tooltip appears.
html	String	null	Can take regular text or HTML strings.
margin	Number	5	Set distance tooltip appears away from its activator excluding transitionMovement.
inDuration	Number	300	Enter transition duration.
outDuration	Number	250	Exit transition duration.
position	String	'bottom'	Set the direction of the tooltip. 'top', 'right', 'bottom', 'left'.
transitionMovement	Number	10	Amount in px that the tooltip moves during its transition.

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.Tooltip.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.

                                            $('.tooltip').tooltip('methodName');
                                            $('.tooltip').tooltip('methodName', paramName);
                                          */
                                    
                                

.open();

Show tooltip.

                                instance.open();
                                        

.close();

Hide tooltip.

                                    
                                        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 tooltip is open.
isHovered	Boolean	If tooltip is hovered.