Advanced Native Tooltip Replacement – iTooltip

Category: Javascript , tooltip | June 6, 2019
Author: Ins-V
Views Total: 231
Official Page: Go to website
Last Update: June 6, 2019
License: MIT

Preview:

Advanced Native Tooltip Replacement – iTooltip

Description:

iTooltip is a pure JavaScript library to replace the native tooltip which generates a custom, rich text tooltip popup from the title attribute of an element.

The library also has the ability to auto re-position the tooltip when the element is very close to the edge of the screen.

How to use it:

Import the main JavaScript file iTooltip.js into the document.

<script src="./dist/iTooltip.js"></script>

Initialize the iTooltip on document ready.

window.onload = function () {
  let tooltip = new iTooltip()
  tooltip.init()
}

Insert any text or html content to the title attribute. That’s it.

<span title="Image in the tooltip.<br><hr><img src='1.png'>">Image in the tooltip.</span>

Possible options to customize the iTooltip.

  • className: default CSS class
  • indentX: horizontal indent
  • indentY: vertical indent
tooltip.init({
  className: 'tooltip',
  indentX: 10,
  indentY: 15
})

You Might Be Interested In:


Leave a Reply