hint-css.js

hint css by jQuery

Example

• https://live.bootstrap-table.com/code/wenzhixin/1362
• https://live.bootstrap-table.com/code/wenzhixin/1361

Install

NPM or YARN

npm install hint-css.js
# or
yarn add hint-css.js

CDN

<link rel="stylesheet" href="https://unpkg.com/[email protected]/src/hint-css.css">
<script src="https://unpkg.com/[email protected]/src/hint-css.js"></script>

How to use

<!-- hint--bottom by default -->
<button data-hint="Tooltips">bottom</button>
<button class="hint--top" data-hint="Tooltips">top</button>
<button class="hint--left" data-hint="Tooltips">left</button>
<button class="hint--right" data-hint="Tooltips">right</button>

Class

• hint--bottom
• hint--top
• hint--left
• hint--right

Options

$.hint.defaults = {
  className: null,
  delayIn: 800,
  fade: false,
  fallback: '',
  gravity: 'n',
  html: false, //data-hint-html="true|false"
  live: false,
  offset: 0,
  opacity: 0.8,
  title: 'title',
  textAlign: 'left',  //data-hint-align="left"
  maxWidth: 0  // data-hint-max-width
}

Why

hint.css is a CSS only tooltip library for your lovely websites.

It is very easy to use but there are some problems when I am using in bootstrap-table.

I want to solve this problem but I don't have a good idea. So I create this jQuery plugin.

Thanks for hint.css and tipsy.