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

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

阅读量：2536 次

发布时间：2019-05-11

本文共 4227 字，大约阅读时间需要 14 分钟。

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

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

CSS

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

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

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

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

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

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

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

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

香草

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

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

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

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

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

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

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

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

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

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

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

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

jQuery的

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

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

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

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

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

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

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

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

VueJS

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