Minimal Rich Text Tooltip JavaScript Library – Creativa Tooltip

Category: Javascript , Tooltip | August 17, 2021
Author:molloeduardo
Views Total:36 views
Official Page:Go to website
Last Update:August 17, 2021
License:MIT

Preview:

Minimal Rich Text Tooltip JavaScript Library – Creativa Tooltip

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

You Might Be Interested In:


Leave a Reply