Documentation

Class: Tooltip

ML. Tooltip

new Tooltip( [settings])

  • A message that appears when a cursor is positioned over an element
  • Each tooltip should have a unique id attribute to match the element's rel attribute.
  • Nested tooltips are not supported.
  • You can show tooltips via data-tooltip or JavaScript.
  • Valid align options are: right, left, top and bottom to the element activating the tooltip overlay.
  • When setting smart: true, the tooltip will only detect collision with window.
  • Custom tooltip based on title attribute.
  • Every tooltip element gets MLTooltip added to the element.
  • You can listen to custom events fired by the tooltip. Returns the tooltip and options. See example below.
  • See it in action + some notes! 😀
Event Name Description
tooltip.opened Triggered when a tooltip is opened.
tooltip.closed Triggered when a tooltip is closed.
Parameters:
Name Type Argument Description
settings Object <optional>

Configuration settings.

Properties
Name Type Argument Default Description
width Number <optional>
 150

The width of the tooltip.
align String <optional>
 right

Where to align the tooltip.
smart Boolean <optional>
 false

If the tooltip should change position or width to not overlap the window.
delay Boolean <optional>
 false

Delay the tooltip going away on mouseout.
delayTime Number <optional>
 3000

Duration to keep the tooltip visible, in ms. when setting delay: true
Examples

Sample markup of tooltip HTML.

<div class="tooltip" id="unique-id1">
  <div class="tooltip-content">
    <h1 class="tight">Hello! I am a tooltip</h1>
    <p class="tight">Im some text about the tooltip.</p>
  </div>
</div>

You can show tooltips via data attribute, data-tooltip="width:200:align:bottom". The only lines of JavaScript would be two lines. The rel attribute needs to equal the ID of the tooltip HTML element.

<a href="#" rel="unique-id1" data-tooltip="width:200:align:bottom">open modal</a>

// Only JavaScript needed:
<script>
  var tooltips = new ML.Tooltip({
    delay: true
  });
  
  tooltips.init();
</script>

// Other javascript files go here.

The tooltip can be triggered via JavaScript instead of or in addition to data-tooltip

// Will show the tooltip HTML with id of unique-id1 with a width of `50 pixels
tooltips.show('unique-id1', {width: 50});

Dynamic tooltip that shows a tooltip with the content "I am a tooltip" inside.

<a href="#" data-tooltip="smart:true:delay:true" title="I am a tooltip">tooltip link</a>

Using custom events.

document.addEventListener('tooltip.opened', function(event) {
   var eventDetails = event.detail;
   console.log('opened tooltip', eventDetails.tooltip);
   console.log('opened tooltip options', eventDetails.options);
});

Methods

destroy()

Destroys the tooltip init.

Example
tooltips.destroy();

hide()

Hides all the tooltips.

Example
tooltips.hide();

init()

Initializes the tooltip class.

Example
tooltips.init();

show(id, tooltipOptions)

Shows a tooltip. Used when showing a tooltip without data-tooltip.

Parameters:
Name Type Description
id String

The id of the tooltip you want to display.
tooltipOptions Object

Configuration settings to overwrite defaults. Only width, arrow and align will be overriden. Other settings are ignored.
Example
// Shows the tooltip with id of unique-id1 with a width of 300 pixels.
tooltips.show('unique-id1', {width: 400});