Advanced Native Tooltip Replacement – iTooltip

Preview:

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
})

Changelog:

v1.1.1 (09/09/2020)

• Updated dependencies