Cool Configurable Tooltip Plugin - jQuery hint-css.js

Cool Configurable Tooltip Plugin - jQuery hint-css.js
File Size: 7.39 KB
Views Total: 95
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

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

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

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

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

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

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

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

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: 'center',

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

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