Home Javascript A Simple Library Allows You To Create Awesome Creativa Tooltips

A Simple Library Allows You To Create Awesome Creativa Tooltips

Javascript webcodeflow · October 19, 2022 · 0 Comment

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