The JavaScript library lets you convert native tooltips into customizable overlays. iTooltip is a pure JS to replace the native tooltip that creates a custom pop-up hint and rich text from the title attribute of an element.

The library also has the ability to automatically reposition the tooltip when an item is too close to the edge of the screen. 

iTooltip Details

Options:

• className – Sets the class name for a block with a hint. Default: ‘tooltip’;
• indentX – Horizontal indent from the cursor (in pixels). Default: 10;
• indentY – Vertical indent from the cursor (in pixels). Default: 15;
• positionX – The initial position of the tooltip horizontally. Default: ‘right’. Variants: ‘left’, ‘right’, ‘center’;
• positionY – The initial position of the tooltip vertically. Default: ‘bottom’. Variants: ‘top’, ‘bottom’, ‘center’;

WARNING! positionX and positionY can not simultaneously have the value “center”.

Must Read: Simple Lightweight jQuery Tooltip Plugin | Cooltip.js

How to make use of it:

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

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

Initialize the iTooltip.

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

Insert any text or HTML content into the title attribute.

<span title="Image in the tooltip.<br><hr> //Add Image Here">WCF on hover tooltip.</span>

Possible options to customize the iTooltip.

tooltip.init({
  className: 'tooltip',
  indentX: 10,
  indentY: 15
})

See Demo And Download

Official Website(Ins-V): Click Here

This superior jQuery/javascript plugin is developed by Ins-V. For extra Advanced Usage, please go to the official website.