10个最受欢迎的 jQuery Tooltip (工具提示)插件
1. Tooltipster
Tooltipster is a powerful, flexible jQuery plugin enabling you to easily create semantic, modern tooltips enhanced with the power of CSS. Tooltipster allows you to use any HTML tag you can think of inside your tooltips. This means you can insert things like images and text formatting tags.
Source
2. Toolbar.js
Toolbar.js allows you to quickly create tooltip style toolbars for use in web applications and websites. The toolbar is easily customisable using the 推ter bootstrap icons and provides flexability around the toolbars display and number of icons.
Toolbars can be attached to any element required. You can run as many toolbars as required. Toolbars are responsive and follow the element on resize. The implementation is pretty straightforward with simple options. It is released under MIT License.
Source
3. Grumble js
Grumble.js provides special tooltips without the usual limitations of north/east/south/west positioning. A grumble can be rotated around a given element at any angle, all 360 degrees. Any distance can be specified.
Any CSS style can be applied. There’s auto-magic size adjustment for use with localised text. FX queues for animating multiple grumbles. And it works in IE6+, and modern browsers. Image spriting is used for actual bubble image, you can change this as you want – it’s just CSS.
Source
4. Progression.js
Progression.js is a jQuery plugin that shows tips about an active form field and also displays the progress (how much of the form is filled). It uses the data attributes for storing the tips, has options for customizing the tooltip and can be implemented into any form so easily.
Source
5. Opentip
Opentip is a pretty cool JavaScript tooltips framework that can work with jQuery, Prototype or standalone.
It creates the tooltips with HTML5 canvas so that any creative designs are possible and they are rendered almost equally in all browsers. There is support for calling content into tooltips with Ajax, positioning them wherever wanted or grouping them (so that only one tooltip of the same group can stay open).
A nice and unique feature is stems (the little pointers) which auto-arranges themselves into any direction.
Source
6. iPicture
iPicture, a jQuery plugin, is perfect for such cases and allows us to place tooltips over any desired location of images. Once the user hovers/clicks the pointers, the tooltip is displayed with its pre-defined content. There are several options for customizing the functionality including the ability to use different pointer images for each tooltip or their animation types.
Also, iPicture has a handy initialize function that saves so much time by enabling a configuration wizard where we can place pointers + set their definitions with drag ‘n’ drops and the JSON output to be used in the code is created automatically.
Source
7. Joyride
Joyride is a plugin for jQuery that simplifies the process of guiding users to discover the features of a website. By defining the steps of the tour as an ordered list, the plugin displays desired information near any HTML element inside tooltips. The location of tooltips (bottom, top), scrolling speed of the page, cookie on/off and several other options exist for customization. To sum up, Joyride is a simple yet effective way of helping users find out the features of a website.
Source
8. TipTip
TinyTips is a very lightweight jQuery plugin that gives the ability to add tooltips to pretty much any element on a page. Thoroughly documented and designer friendly. TinyTips is very easy to install and use. Simply include TinyTips and the latest release of jQuery in the head. You can also give it a nice style by editing the stylesheet.
Source
9. qTip 2
qTip2 is the second generation of the advanced qTip plugin for the ever popular jQuery framework. Building on 1.0′s user friendly, yet feature rich base, qTip2 provides you with tonnes of features like speech bubble tips and imagemap support, and best of all… it’s completely free under the MIT/GPLv2 licenses.
qTip2 utilises a separate stylesheet to contain all tooltip styles, which allows you to easily add new styles without additional JavaScript code, as well as easily editing pre-existing styles.
Source
10. Tooltipsy
Tooltipsy is a jQuery plugin that provides a flexible base for creating tooltips. It comes with minimum default styles or animations but gives you the complete control over them. It can be positioned however you wish, look and feel can be totally customized with CSS and any type of animations can be implemented.
Source