Easy Html5 Tooltip JavaScript Library – Tooltips

Category: Javascript , Tooltip | July 4, 2018
Views Total:3,272 views
Official Page:Go to website
Last Update:July 4, 2018


Easy Html5 Tooltip JavaScript Library – Tooltips


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

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

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

<div class="box" id="example" title="Tooltip here">
  Tooltip with JS
    // 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'



  • Code refactor

You Might Be Interested In:

One thought on “Easy Html5 Tooltip JavaScript Library – Tooltips

  1. nasir

    how to use in rails because rails does not support “data-tooltip='{“showOn”:”click”, “orientation”:”bottom”}'”


Leave a Reply