Easy Html5 Tooltip JavaScript Library – Tooltips

Preview:

Description:

Tooltips is a RequireJS module used to display tooltips on any Html elements using HTML5 data-attribute and pure JavaScript.

How to use it:

Include the tooltip.css in the header for tooltip styles.

<link rel="stylesheet" href="tooltip.css">

Include the require.js at the bottom of the page.

<script src=tooltip.js"></script>

Display a tooltip on mouse hover. The text is extracted from title attribute if not set in config.

<div class="box" data-tooltip title="Tooltip content">      
  Tooltip on hover
</div>

Display a tooltip on click. Tooltip config can be set through data-tooltip html attribute (no-js).

<div class="box" data-tooltip='{"showOn":"click", "orientation":"bottom"}' title="Tooltip content">
  Tooltip on click
</div>

You can also attach the tooltip to an element using JavaScript:

<div class="box" id="example" title="Tooltip here">
  Tooltip with JS
</div>

Tooltip.create(
  document.getElementById('example'),
  {
    // options here
  }
);

All possible options with default values.

{
  // 'top', 'bottom', 'left', 'right'
  position    : 'auto',
  // CSS class
  class       : 'darkgrey',
  // element CLASS
  elementClass: '',
  // 'top', 'bottom', 'left', 'right'
  orientation : 'top',
  // offset in pixels
  offset      : 0,
  // trigger event
  showOn      : 'hover',
  // custom close icon
  closeIcon   : false,
  // default tooltip text
  text        : 'This tooltip text must be set with title or data-tooltip attribute'
}

Changelog:

07/04/2018

• Code refactor