使用CSS，JavaScript和jQuery的40多种有用的工具提示脚本

一个有趣的UI元素，工具提示（也称为信息提示）会在鼠标光标悬停在某个文本或图像上并带有有关该元素的信息时，出现一个小方框。 在用户体验方面 ，工具提示为用户提供了最快，最简单的信息源， 而无需单击任何内容 。

尽管向文本添加工具提示的最简单方法是使用HTML标记<ACRONYM>或TITLE =””，ALT =””。 但是， 您可以使用工具提示脚本使用JavaScript和CSS创建一些非常酷的工具提示设计和样式 。 让我们来看看。

CSS

Balloon.css – Balloon是由 SasS 和LESS组成的 CSS库，用于显示交互式工具提示。 工具提示的内容和位置可通过data-属性进行配置。 您可以在左侧，右侧或左侧-右侧显示工具提示。 您甚至可以将Emojis添加到内容中 。 Balloon.css可以通过NPM安装或从CDNJS加载。

Simptip –由SasS制成，可以重新配置和重新编译代码以满足您的要求 。 工具提示的位置和内容可以通过类名称和data-tooltip属性进行配置。 Simptip可作为NPM，Yarn和Bower软件包提供 。

Hint.css –流行CSS库之一，用于显示工具提示，Hint.css被Fiverr，Webflow和Tridiv等许多流行的网站使用。 与其他两个CSS库不同， Hint.css使用aria-label您可以使用BEM方法 通过类名称配置大小和颜色 。 Hint.css在NPM，Bower和CDNJS上可用 。

它使用CSS变量，使您可以仅使用普通CSS文件来自定义工具提示。 许多网络和移动浏览器已经支持CSS变量 。 Microtip可作为NPM，Yarn软件包和UNPkg CDN获得 。

Wenk –只有733字节。 使用CSSNext，LESS和SCSS用超现代CSS编写的超轻量级库，因此可以按您喜欢的方式自定义和重新编译样式。 Wenk可以从NPM，Yarn和以下免费CDN服务中下载： rawgit.com和unpkg.com 。

Tooltippy –另一个轻量级CSS库 ，大小仅为1 KB。 Tooltippy包含几个用于对工具提示进行样式设置的预制主题。 它使用名为StylusCSS预处理器编写。 请参阅有关如何扩展或自定义这些主题的说明 。

ElegantTips –该库带有一些预先构建的主题 ，可以使用提供的类名进行更改。 与其他依赖HTML5 data-或aria-label属性的库不同，ElegantTips需要添加一个额外的元素来形成工具提示。 这使您可以在工具提示中添加除简单文本之外的任何内容 。

Tootik –这个CSS库不仅提供CSS，LESS和SasS格式的样式表，而且还提供了易于使用的GUI来自定义工具提示 。 您只需复制并粘贴此工具生成HTML。 就这么简单。

香草

TippyJS –由Popper.js提供支持，TippyJS带有大量配置工具提示的选项 。 我们可以自定义动画，工具提示箭头，宽度，大小，主题等等。 它还提供了回调函数，您可以在显示和隐藏工具提示时执行这些函数 。 这些功能使TippyJS成为我们列表中功能强大JavaScript库之一，以创建工具提示。

Darsain工具提示 –该库提供工具提示的基本实现。 仍然，它提供了广泛的选项来配置tootip行为，并提供了一组类名来更改工具提示的外观 。 该工具提示在较旧的浏览器（如IE9和IE8，如有需要，需要进行一些调整）下效果很好。

Bubb – Bubb可能非常适合高级JavaScript用户。 除了显示简单的文本外 ，还可以使用其广泛的API，以编程方式向工具提示中添加更复杂HTML内容。 它太酷了; 您可以参考文档中的示例。

Popper –包含一种技术抽象来创建“弹出”的内容，例如工具提示，弹出框和下拉菜单 。 TippyJS将其用作库的基础，并被Bootstrap，Microsoft和Atlassian等网络上的知名人士使用。

YY工具提示 –与其他库不同，YY工具提示不需要您添加HTML元素或属性 。 它与JavaScript完全兼容，并且内容，位置和颜色在对象而不是HTML元素中定义。 完美地与完整JavaScript Web应用程序结合使用。

Position.js –另一个出色的本机JavaScript库，用于创建工具提示，Position.js 提供了一个GUI来配置功能，并简单地复制和粘贴在那里生成的代码 。 Position.js可以与React.js或Vue.js结合使用。

Bezet工具提示 –该库提供了14个显示工具提示的选项 ； 例如，在right ， left ， bottom ， left-center ， right-end ， bottom-center等等。此外，它还很聪明，可以根据工具提示周围的可用空间来调整工具提示位置 。 查看演示 。

MouseTip –此JavaScrtipt库将创建一个沿光标位置移动的工具提示 。 工具提示配置了非标准的mousetip-属性，而不是使用HTML5 data-属性。 Mousetip可作为NPM模块使用。

Internetips –非常类似于MousetTip，此库生成的工具提示遵循光标位置 。 一切都是通过JavaScript对象而不是HTML进行配置的，并且属性也是为现代浏览器构建的 。 它轻巧快速。

MTip –具有良好浏览器兼容性的 Tooltip JavaScript库。 它与IE8兼容，可通过Options完全自定义，并且您可以将Tooltip添加到任何元素上，甚至是img （图像元素）上。

Bubblesee –一个轻量级JavaScript库，提供“工具提示”的简单功能。 使用JavaScript库很容易，无需复杂的选项即可自定义输出。 如果您想更改工具提示的外观，则提供一个Sass文件。 查看演示。

Tipfy – Tipfy使用现代JavaScript语法ES6 构建，大小仅为2 KB 。 该库提供了两种版本的文件： tipfy.min.js提供具有现代ES6语法的脚本，以及tipfy.es5.min.js如果您需要与旧版浏览器兼容）。 它使用data-属性自定义工具提示 ； 例如， data-tipfy-side用来设置工具提示的方向，并使用data-tipfy-text属性添加工具提示的内容。

jQuery的

工具提示 –该库提供了广泛的选项，可自定义几乎所有内容，例如主题，动画，触摸支持，内容，打开和关闭触发器等。它还提供了自定义事件侦听器和回调，允许开发人员使用自定义功能扩展工具提示。 另外，作为jQuery插件，该工具提示将在IE6等旧版浏览器中运行，具体取决于所使用的jQuery版本 。

Protip –另一个扩展的jQuery插件，Protip支持49个位置， HTML用于工具提示内容，图标支持，自定义回调等。 Protip提供了一个GUI，可让您轻松自定义工具提示。

PowerTip –这个jQuery插件还带来了Options和API，为开发人员提供了许多不同的方法来实现工具提示。 它支持键盘导航 ; 使用Tab键盘导航元素时，使弹出窗口出现。 PowereTip 可作为NPM模块使用 。 它可以与RequireJS和Browserify一起使用。

可访问的Aria工具提示 –内置有可访问性功能的jQuery插件，该工具提示旨在显示带有标题，多行文本和关闭按钮的对话框 。 它是我们列表中的一员。

TipsJS –一个简单的jQuery插件，但它具有非常独特的功能。 工具提示内容使用data-tooltip属性设置 。 更重要的是，我们还可以使用特殊字符包装内容，以类似于Markdown格式来格式化内容。 我们可以使用*将内容设为粗体，使用~表示斜体，使用^表示标题。

深色工具提示 –该库提供了一些真正有用的功能来增强工具提示。 例如，我们可以添加一个确认按钮-是和否，在显示工具提示时使背景变暗，然后将HTML元素添加到内容中。 我认为您确实应该查看演示页面 。

Aria工具提示 –另一个具有内置辅助功能的工具提示，此jQuery插件符合WAI-ARIA 1.1。 它以一种响应方式，可以为不同的视口大小提供不同的配置 。 Aria Tooltip可作为名为t-aria-tooltip的NPM模块获得。

Toolbar.js –虽然其他jQuery插件只能在工具提示中显示简单的文本或HTML内容，但此jQuery插件会创建工具栏 。 工具提示将包含两个或多个带有图标的链接，该链接通常会像其他工具栏一样在click上执行操作。 查看文档和示例 。

VueJS

V-工具提示 - V-工具提示是Vue.js部件搭载Popper.js引擎盖下。 它提供了一个名为v-tooltip的新指令，可以将其添加到任何元素中以创建工具提示 。 v-tooltip可能包含工具提示内容或“选项” 。 除了自定义v-tooltip指令之外，您还可以将工具提示与v-popover组件一起添加。 使用此组件，您可以使用Vue.js组件或HTML 将更复杂的内容添加到工具提示中 。

Vue-Bulma工具提示 –一个Vue.js组件，用于基于Bulma UI框架创建工具提示。 该库是Vue Bulma组件的一部分。 但是， 工具提示组件可以作为名为vue-bulma-tooltip的NPM模块使用，您可以将其用作独立组件。

Vue-Directive-Tooltip –总的来说，它类似于基于Popper.js的V-Tooltip组件，并提供了称为v-tooltip的相同指令。 但是，它似乎没有提供v-popover组件。

Vue-Tippy –该库将Tippy.js包装到Vue.js组件中。 它具有一个名为v-tippy的自定义Vue.js指令，该指令的工作方式类似于HTML属性。 我们可以添加工具提示的内容或自定义选项。 它还使用html选项在工具提示内容上呈现自定义Vue.js组件 。

Vue-Hint –包装Hint.css的 Vue.js插件。 该插件具有v-hint-css指令以添加工具提示。 它带来的选项集与Hint.css相同 ，因此您可以将它们添加为JavaScript对象或Vue.js修饰符。

ReactJS

React Floater –该库将Popper.js包装到一个名为Floater的React组件中，因此它具有与Floater相同的强大功能。 您可以添加工具提示和弹出窗口，也可以通过此沙盒 来使用此组件 。

React Tippy –建立在Tippy.js和Popover.js之上。 该库引入了一个Tooltip组件， 您可以将其包含在React应用程序中 。

React Hint –一个扩展Hint.css的React组件。 这些组件添加了一些在Hint.css中不可用的功能，例如自动定位，延迟和回调函数 。

更多

Ember工具提示 –用于创建工具提示的Ember.js组件，它建立在Popper.js之上。 该组件在设计时还考虑了可访问性，并且在不断改进以符合此问题上大约508的要求。

D3提示 –一个D3.js插件。 D3.js是一个JavaScript库，用于数据可视化，如图表，地图，图表等。此插件可让您在这些数据之上显示工具提示。

翻译自: https://www.hongkiat.com/blog/tooltips-scripts-50-scripts-with-ajax-javascripts-css-tutorials/