Route Planner and Route Optimizer

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.

  <!-- data-position can be : bottom, top, left, or right -->
  <!-- data-tooltip defines the tooltip text -->
  <a class="btn tooltipped" data-position="bottom" data-tooltip="I am a tooltip">Hover me!</a>


  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.tooltipped');
    var instances = M.Tooltip.init(elems, options);

  // Or with jQuery



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.


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', paramName);

Show tooltip.;


Hide tooltip.



Destroy plugin instance and teardown



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.