Minimal Rich Text Tooltip JavaScript Library – Creativa Tooltip

Preview:

Description:

A lightweight, fully configurable, mobile-compatible, rich text tooltip JavaScript library.

How to use it:

1. Download and import the creativa-tooltip.js library into the document.

<script src="./creativa-tooltip.js" type="text/javascript"></script>

2. Define the tooltip content in the ct-tooltip attribute:

<a href="https://cssscript.com" ct-tooltip="Go to CSSScript<br><i>Test HTML</i>">
  CSSScript.com
</a>

3. That’s it. You can config the position of the tooltip using the ct-tooltip-position attribute:

• top (default)
• right
• bottom
• left

<a href="https://cssscript.com" 
   ct-tooltip="Go to CSSScript<br><i>Test HTML</i>"
   ct-tooltip-postition="right">
   CSSScript.com
</a>

4. Customize the tooltip by overriding the default parameters in the creativa-tooltip.js.

static settings = {
  animationSpeed: 100,
  openAnimationDelay: 150,
  borderRadius: '5px',
  backgroundColor: '#000',
  color: '#fff',
  fontSize: '12px',
  fontWeight: 500,
  lineHeight: '16px'
}