A Simple Library Allows You To Create Awesome Creativa Tooltips

Creativa – Tooltip is a simple library that allows you to create great tooltips by importing just one JavaScript file.

javascript tooltip on hover, jquery tooltip with html content, jquery tooltip on hover, javascript tooltip library, simple tooltip jquery, tooltip jquery

Customizable

  • Every aspect of the hint is customizable.

Tested browsers

  • Chrome
  • Firefox
  • Microsoft Edge
  • Safari

It does not work with the old Internet Explorer.

Mobile

The tip works perfectly on mobile devices too. To do this, I implemented an event that disables the browser context menu in tooltip items.

How to make use of it:

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

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

2. Define the tooltip content material within the ct-tooltip attribute:

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

3. You can config the place of the tooltip utilizing the ct-tooltip-position attribute:

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

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

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

Minimal Rich Text Tooltip JavaScript Library, Creativa – Tooltip Plugin/Github, jquery tooltip plugin


See Demo And Download

Official Website(molloeduardo): Click Here

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

Share