grumble.js文档 - 气泡形状的提示（tooltip）控件
grumble.js
最开始是为
网站开发的,
是一个很特别的提示控件，它没有通常的north/east/south/west的定位限制。
任何一个grumble都可以放到它所围绕元素的任意角度的位置，360度全方位无死角，无残留。还能指定任意距离，应用任意CSS样式。
对于任意文本还可以自动调整大小。
多个grumble可以通过FX队列实现动画效果。 queues for animating multiple grumbles.
最后，它能在IE6+这些古董浏览器上工作，更不用FF、Chrome这些现代的浏览器了！
grumble.js 其实是一个jQuery插件，可以在 找到源码下载。
$('h1').grumble({
text: 'Bubble-tastic!',
angle: 85,
distance: 100,
showAfter: 500
点就能看到以下代码实现的grumble动画。
带有关闭按钮
超大文本区
$('#grumble1').grumble(
angle: 200,
distance: 3,
showAfter: 1000,
hideAfter: 2000
$('#grumble2').grumble(
text: 'Ohh, blue...',
angle: 180,
distance: 0,
showAfter: 2000,
type: 'alt-',
hideAfter: 2000
$('#grumble3').grumble(
text: 'Click me!',
angle: 150,
distance: 3,
showAfter: 3000,
hideAfter: false,
hasHideButton: true,
buttonHideText: 'Pop!'
$('#grumble4').grumble(
text: 'Whoaaa, this is a lot of text that i couldn\'t predict',
angle: 85,
distance: 50,
showAfter: 4000,
hideAfter: 2000,
Can I haz callbacks? Sure.
$('#myElement').grumble({
showAfter: 1000,
hideAfter: 2000,
onShow: function(){
console.log('triggered when show animation completes');
onBeginHide: function(){
console.log('triggered when hide animation begins');
onHide: function () {
console.log('triggered when hide animation completes');
grumble.js 暴露了三个方法：'show'、'hide' 和 'adjust'。adjust方法可以用来更新grumble的位置或角度。
警告：点击后面的链接会让你受精的！！！！
$('#darkside').click(function(e){
var $me = $(this),
e.preventDefault();
$me.grumble(
angle: 130,
text: 'Look at me!',
type: 'alt-',
distance: 10,
hideOnClick: true,
onShow: function(){
var angle = 130, dir = 1;
interval = setInterval(function(){
(angle & 220 ? (dir=-1, angle--) : ( angle & 130 ? (dir=1, angle++) : angle+=dir));
$me.grumble('adjust',{angle: angle});
onHide: function(){
clearInterval(interval);
grumble.js 使用了CSS3这种流行技术，并通过'计算'将自己定位到你所希望的位置上。
对于现代的浏览器我们使用
，对于 IE6+ 使用非标准的.
对于实际用到的气泡图片采用了Image spriting技术，你自己可以随意换，仅仅是改改CSS代码而已。
Big thanks to everyone involved in creating the idea and design of grumble.js (aka. Huddle Bubbles). Let me know if you want explicit mention.
Written by
Grumble.js由翻译整理
&Bubble-tastic!
x&&Ohh, blue...&Click me!&Whoaaa, this is a lot of text that i couldn't predict10 Best jQuery Tooltip Plugins - WebToolsDepot
10 Best jQuery Tooltip Plugins
10 Best jQuery Tooltip Plugins
Tooltips are considered beneficial within being able to provide snippets of information to your website visitors without creating clutter in ones design. The Tooltip is regarded as a common graphical user interface element, and is used in conjunction with a cursor, most commonly a pointer. The user hovers the pointer over an item, ( without clicking it ), and an “infotip” [tooltip] may appear— which is a small “hover box” with a snippet of information about the item being hovered over.
Adding an attractive tooltip to your website isnt a difficult undertaking, although tooltips do not appear on mobile devices, ( since there is no cursor )- there are an innumerable different type of tooltip effects which one can find and incorporate into their web pages. There are quality scripts available for use which will allow one to set up any type of tooltip without coding it from scratch. In this post we present 10 of the Best jQuery tooltip plugin scripts.
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.
[button color=”black” size=”medium” link=”http://calebjacob.com/tooltipster/” target=”blank” ]Source[/button]
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 twitter 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.
[button color=”black” size=”medium” link=”http://paulkinzett.github.com/toolbar/” target=”blank” ]Source[/button]
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.
[button color=”black” size=”medium” link=”http://jamescryer.github.io/grumble.js/” target=”blank” ]Source[/button]
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.
[button color=”black” size=”medium” link=”http://git.aaronlumsden.com/progression/” target=”blank” ]Source[/button]
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.
[button color=”black” size=”medium” link=”http://www.opentip.org/” target=”blank” ]Source[/button]
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.
[button color=”black” size=”medium” link=”http://ipicture.justmybit.com/” target=”blank” ]Source[/button]
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.
[button color=”black” size=”medium” link=”http://www.zurb.com/playground/jquery-joyride-feature-tour-plugin” target=”blank” ]Source[/button]
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.
[button color=”black” size=”medium” link=”http://code.drewwilson.com/entry/tiptip-jquery-plugin” target=”blank” ]Source[/button]
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.
[button color=”black” size=”medium” link=”http://qtip2.com/” target=”blank” ]Source[/button]
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.
[button color=”black” size=”medium” link=”http://tooltipsy.com/index” target=”blank” ]Source[/button]
10 Best jQuery Tooltip Plugins1.5 (30%) 2 votes
About The Author
A Tech Geek hooked on technology, code & Design.We use cookies to enhance your experience on our website. By continuing to use our website, you are agreeing to our use of cookies. You can change your cookie settings at any time.
Human Reproduction Update | Oxford Academic
Impact Factor
5 year Impact Factor
SI: Obstetrics & Gynecology
1 out of 82
Increased Impact Factor announced
We are delighted to announce that the Impact Factor for Human Reproduction Update has increased to 11.852. In celebration of the latest Impact Factors, we have put together a collection of highly cited articles from the ESHRE journals, currently free to read online.
Latest articles
Most cited
ESHRE Highlights from 2017
Take a look at our top 10 ESHRE journals' highlights for 2017. From the launch of HROpen, to the curation of special content collections, and the continued publication of stand-out research.
New- Grand Theme Review
Marco Conti and Frederica Franciosi present an enclyopaedic review of the cellular and molecular processes that control mammalian oocyte-to-embryo transition. The review focuses on the final stages of oogenesis and their importance for the aquisition of embryonic developmental competence.
Become a member of ESHRE today
Membership of the Society is open to all individuals active in the field of reproductive medicine and science. Membership of the Society offers many benefits, including reduced registration fees and subscriptions to the journals.
Top cited research from the ESHRE journals
Read a collection of the most cited articles from Human Reproduction Update, Human Reproduction, and Molecular Human Reproduction free online.
Endometriosis awareness month- research from ESHRE
Read articles on endometriosis from all four ESHRE journals in support of Endometriosis awareness month in the UK.
Read a Q&A with Professor Siladitya Bhattacharya
We are delighted to announce the launch of Human Reproduction Open (HROpen), the new, official open access journal from ESHRE. Meet the journal&s Editor-in-Chief Professor Siladitya Bhattacharya.
Human Reproduction Update in the news
Temporal trends in sperm count: a systematic review and meta-regression analysis
Never miss an issue of Human Reproduction Update
to receive table of contents email alerts as soon as new issues of Human Reproduction Update&are published online.
Find out about our developing countries initiative
Your institution could be eligible to free or deeply discounted online access to Human Reproduction Update through the Oxford Developing Countries Initiative.
Read the latest news from ESHRE
Keep up with all the latest news and developments from the European Society of Human Reproduction and Embryology.
Recommend to your library
Fill out our
to recommend this journal to your library.
Oxford University Press is a department of the University of Oxford. It furthers the University's objective of excellence in research, scholarship, and education by publishing worldwide
This Feature Is Available To Subscribers Only
This PDF is available to Subscribers Only
For full access to this pdf, sign in to an existing account, or purchase an annual subscription.Examples and documentation on grumble.js
grumble.js
Originally written for ,
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.
grumble.js is currently written as a jquery plugin and can be found on
$('h1').grumble({
text: 'Bubble-tastic!',
angle: 85,
distance: 100,
showAfter: 500
The following code animates a set of grumbles,
see it in action.
Different style
With close button
Enlarged for text
$('#grumble1').grumble(
angle: 200,
distance: 3,
showAfter: 1000,
hideAfter: 2000
$('#grumble2').grumble(
text: 'Ohh, blue...',
angle: 180,
distance: 0,
showAfter: 2000,
type: 'alt-',
hideAfter: 2000
$('#grumble3').grumble(
text: 'Click me!',
angle: 150,
distance: 3,
showAfter: 3000,
hideAfter: false,
hasHideButton: true,
buttonHideText: 'Pop!'
$('#grumble4').grumble(
text: 'Whoaaa, this is a lot of text that i couldn\'t predict',
angle: 85,
distance: 50,
showAfter: 4000,
hideAfter: 2000,
Can I haz callbacks? Sure.
$('#myElement').grumble({
showAfter: 1000,
hideAfter: 2000,
onShow: function(){
console.log('triggered when show animation completes');
onBeginHide: function(){
console.log('triggered when hide animation begins');
onHide: function () {
console.log('triggered when hide animation completes');
grumble.js exposes three methods, 'show', 'hide' and 'adjust'. The adjust call allows you to update position and angle.
Warning: Clicking on this link may damage your UX.
$('#darkside').click(function(e){
var $me = $(this),
e.preventDefault();
$me.grumble(
angle: 130,
text: 'Look at me!',
type: 'alt-',
distance: 10,
hideOnClick: true,
onShow: function(){
var angle = 130, dir = 1;
interval = setInterval(function(){
(angle > 220 ? (dir=-1, angle--) : ( angle < 130 ? (dir=1, angle++) : angle+=dir));
$me.grumble('adjust',{angle: angle});
onHide: function(){
clearInterval(interval);
What is this magic?
grumble.js uses buzzwords like CSS3 and 'maths' to position itself exactly where you want it.
Modern browsers use
with IE6+ using non-standard .
Image spriting is used for actual bubble image, you can change this as you want - it's just CSS.
Credit due
Big thanks to everyone involved in creating the idea and design of grumble.js (aka. Huddle Bubbles). Let me know if you want explicit mention.
Written byGrumble.js创建球形汽泡Tooltips的jQuery插件 &#8211; 开发者头条
Grumble.js创建球形汽泡Tooltips的jQuery插件
Grumble.js创建球形汽泡Tooltips的jQuery插件