Cool Configurable Tooltip Plugin - jQuery hint-css.js

hint-css.js is the jQuery version of the Hint.css library that provides an easy way to create cool, configurable tooltips on any elements.

Key Features:

• Fade in/out transitions.
• Supports HTML content.
• Allows you to specify the max-width & text alignment.
• Easy to implement with no JS call.

How to use it:

1. Install & Download.

# Yarn
$ yarn add hint-css.js

# NPM
$ npm install hint-css.js --save

2. Load the necessary JavaScript and CSS files in your HTML file.

<link rel="stylesheet" href="/path/to/src/hint-css.css" />
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/src/hint-css.js"></script>

3. To attach a tooltip to an element, just define the tooltip content in the data-hint attribute and the plugin will take care of the rest.

<button data-hint="Tooltip Content">
  Hover Me
</button>

4. Determine the placement of the tooltip. Default: bottom.

<button data-hint="Tooltip Content" class="hint--top">
  Top
</button>

<button data-hint="Tooltip Content" class="hint--left">
  Left
</button>

<button data-hint="Tooltip Content" class="hint--right">
  Right
</button>

5. Determine whether to allow HTML content in the tooltip.

<button data-hint="<b>HTML</b> Tooltips" 
        data-hint-html="true">
        HTML Content
</button>

6. More configuration options to customize the tooltip. Override the default parameters in the hint-css.js as follows:

$.hint.defaults = {

  // additional CSS class
  className: null,

  // time to wait before showing the tooltip
  delayIn: 0,

  // enable/disable fade in/out transitions
  fade: true,
  fallback: '',

  // w/n/s/w
  gravity: 'n',

  // same to data-hint-html
  html: false,
  
  // offset in pixel
  offset: 0,

  // opacity from 0 to 1
  opacity: 0.8,

  // title
  title: 'title',

  // same to data-hint-align
  textAlign: 'left',

  // same to data-hint-max-width
  maxWidth: 0
  
}

Changelog:

2023-07-16

• Updated the default value of textAlign to left

2023-05-30

• Update options

2022-04-19

• Fixed display position error and add hover support

---

This awesome jQuery plugin is developed by wenzhixin. For more Advanced Usages, please check the demo page or visit the official website.