hint-css.js是hint.css库的jQuery版本，它提供了一种在任何元素上创建酷的、可配置的工具提示的简单方法。

主要功能：

• 淡入/淡出过渡。
• 支持HTML内容。
• 允许您指定最大宽度和文本对齐方式。
• 易于实现，无需JS调用。

如何使用它:

1.安装和下载。

# Yarn
$ yarn add hint-css.js
 
# NPM
$ npm install hint-css.js --save

2.在HTML文件中加载必要的JavaScript和CSS文件。

<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.要将工具提示附加到元素，只需在数据提示属性，插件将处理其余部分。

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

4.确定工具提示的位置。默认值：底部。

<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.确定是否允许在工具提示中显示HTML内容。

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

6.用于自定义工具提示的更多配置选项。覆盖中的默认参数提示-css.js如下所示：

$.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
  
}

更新日志：

2022-04-19

• 修复了显示位置错误并添加了悬停支持

预览截图

酷炫 可配置工具提示插件 jQuery hint cs.js