jQuery plugin to add 360 rotatable bubble style tooltips

Overview

Sorry, this project is no longer maintained.

grumble.js

Add a bubble to any element; configure its rotation on a 360 degree axis and define its distance from the centre of the element.

Bubble size adapts to contents - perfect when text is localised and size can not be determined up front.

Examples

grumble.js examples

Author

James Cryer / Huddle.com

Licence

Do what you like, just don't be an arsehole.

Comments
  • Blows up on RequireJS (possibly on all other AMD loaders) with

    Blows up on RequireJS (possibly on all other AMD loaders) with "{code here} has no 'extend' method"

    This happens because content is eval'ed in some context that does not provide GrumbleBubble from window.

    Suggest changing both, Bubble AND jQuery-Grumble codes to be wrapped as such:

    For Bubble:

    (function(window){ var $ = window.jQuery ... })(window)

    for jquery-grumble:

    (function (window) { var $ = window.jQuery , Bubble = window.GrumbleBubble ... })(window)

    and the code stops blowing when $obj.grumble( is called.

    This, of course does not make the code AMD-compatible in pure sense as it still does not have a define( , but it really does not need to be since it just decorates jQuery and all AMD loaders can just require that and get back $ object.

    By the way. Plug in if fricken awesome! Females here (at office) especially love the bubbles, as error messages in bubbles are no longer bad-looking :)

    opened by dvdotsenko 4
  • in Opera, the point of the bubble is in the wrong direction

    in Opera, the point of the bubble is in the wrong direction

    I'm using Opera version 11.50 and when testing out the examples at http://jamescryer.github.com/grumble.js/ the bubbles appear at the right position, but the point of the bubble is pointing down, instead of to the element which launched the grumble.

    opened by elbandido 3
  • Broken in IE10.

    Broken in IE10.

    Get an error message about attempting to get .item from null.

    Appears .item is something that the minify'er adds as it does not appear to be in the un-minify'd source.

    Again this is an IE10 issue, but I haven't checked in other IE browsers.

    opened by j0rd 2
  • showToolTip is not defined

    showToolTip is not defined

    Hi! I'm french so sorry for my english. So when I add the file, this javascript errors appears : showToolTip is not defined.

    So one can help me?

    Thanks

    David AUFFRAY

    opened by davidauffray 2
  • how can I add a link to the text of grumble?

    how can I add a link to the text of grumble?

    $('#darkside').mouseover(function(e){
    var $me = $(this), interval;
    
    e.preventDefault();
    
    $me.grumble(
        {
            angle: 330,
            text: 'Click to job list!',
            type: 'alt-', 
            distance: 130,
            showAfter: 0 ,
            hideAfter:3000,
        }
    );
    $(".grumble-text").click(function(){ window.location.href="query.php?backurl="+window.location.href; });
    

    });

    This will be work! But it not a good way to solve this problem. How can I get two grumble with a href when I click?

    opened by luxiaotian 1
  • In ie6 and ie7 ,the point of the bubble is in the wrong direction

    In ie6 and ie7 ,the point of the bubble is in the wrong direction

    The situation is the same as Issue #1 in terms of the examples page (http://jamescryer.github.io/grumble.js/), I'm puzzled. Thanks in advance,your plugin meets my need well.

    opened by BoWuGit 1
  • $.browser.msie is deprecated in jQuery 1.9.1

    $.browser.msie is deprecated in jQuery 1.9.1

    Please remove $.browser.msie from your code to detect IE since its deprecated in the version 1.9.1 of jQuery. Its used in jquery.grumble.js and Bubble.js

    Suggestion: http://stackoverflow.com/questions/14892095/browser-msie-error-after-update-to-jquery-1-9-1

    opened by yeskarthik 1
  • Different start positions in different browsers

    Different start positions in different browsers

    It seems that the starting position of the bubbles are different in Firefox/IE9 from those in Chrome for div and img tags.

    Lets say you have a div with 100 width/100 height, in Firefox and IE9 the starting coordinates of the bubble are (0,50), in Chrome they are (0,0).

    Im initializing with:

            $(document).ready(function(){
    
                $('#chicken').grumble(
                    {
                        text: 'Hell yeah.',
                        angle: 45,
                        distance: 0,
                    }
                );
    
            });
    

    (yes, a talking chicken)

    Im going to look with more detail at this issue later.

    opened by erfanimani 1
  • Trying to fix the problem when you want your bubble to scroll with your

    Trying to fix the problem when you want your bubble to scroll with your "position relative" div.

    So if "my_div_with_position_relative" scroll, the bubble with scroll with it. The position of the bubble has a bit changed compared to Master. Surely because i went from $me.offset() to $me.position()

    test :

    <body>

    <div id="mondiv" style="width:500px;height:250px;overflow:auto; position : relative">
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <input type="text" id="test">
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <br/><br/><br/><br/><br/>a<br/><br/><br/><br/>b
    </div>

    <input type="text" id="caca">

    <script>

    $('#test').grumble({
    text: 'Bubble-tastic!',
    angle: 85,
    distance: 100,
    showAfter: 500,
    context : '#mondiv'
    });

    $('#caca').grumble({
    text: 'Bubble-tastic!',
    angle: 85,
    distance: 100,
    showAfter: 500
    });

    </script>

    </body>

    Tell me what you think ... For me it's a bit nasty, i would be pleased to see a better solution or improvements

    opened by laurentdebricon 1
  • [enhancement] Add missing bower.json.

    [enhancement] Add missing bower.json.

    Hey, maintainer(s) of jamescryer/grumble.js!

    We at VersionEye are working hard to keep up the quality of the bower's registry.

    We just finished our initial analysis of the quality of the Bower.io registry:

    7530 - registered packages, 224 of them doesnt exists anymore;

    We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

    Sadly, your library jamescryer/grumble.js is one of them.

    Can you spare 15 minutes to help us to make Bower better?

    Just add a new file bower.json and change attributes.

    {
      "name": "jamescryer/grumble.js",
      "version": "1.0.0",
      "main": "path/to/main.css",
      "description": "please add it",
      "license": "Eclipse",
      "ignore": [
        ".jshintrc",
        "**/*.txt"
      ],
      "dependencies": {
        "<dependency_name>": "<semantic_version>",
        "<dependency_name>": "<Local_folder>",
        "<dependency_name>": "<package>"
      },
      "devDependencies": {
        "<test-framework-name>": "<version>"
      }
    }
    
    

    Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

    NB! Please validate your bower.json with jsonlint before commiting your updates.

    Thank you!

    Timo, twitter: @versioneye email: [email protected] VersionEye - no more legacy software!

    opened by timgluz 0
  • This fixes a bug where  grumble/bubble does not work if you include it in the head of your page instead of at the very bottom

    This fixes a bug where grumble/bubble does not work if you include it in the head of your page instead of at the very bottom

    If you happen to include Bubble.js in the of your DOM, then the $('body') selector may not select an element as it has not been parsed yet. This fixed that bug.

    opened by mkoryak 0
  • Bubble image not positioned correctly on rotation

    Bubble image not positioned correctly on rotation

    Hi, under certain situations, the rotation is not centered correctly, might be because Im using the library from a chrome extension. My fix was to add -webkit-transform-origin on cssRotate:

    cssRotate: function () { this.bubble.css({ '-moz-transform': 'rotate(' + this.rotateDeg + 'deg)', '-webkit-transform': 'rotate(' + this.rotateDeg + 'deg)', '-o-transform': 'rotate(' + this.rotateDeg + 'deg)', 'transform': 'rotate(' + this.rotateDeg + 'deg)', '-webkit-transform-origin-x': Math.floor(this.css.width/2)+ 'px', '-webkit-transform-origin-y': Math.floor(this.css.height / 2) + 'px' }); }

    opened by zmandel 0
Owner
James Cryer
Senior Frontend Engineer
James Cryer
An opensource 360° media viewer written in JavaScript using Electron and Marzipano

open360viewer open360viewer is an opensource 360° media viewer. It is based on electron and marzipano. It currently supports opening equirectangular 3

null 4 Oct 9, 2022
JS Cloudimage 360 View - A simple, interactive resource that can be used to provide a virtual tour of your product

JS Cloudimage 360 View - A simple, interactive resource that can be used to provide a virtual tour of your product

Scaleflex 1.9k Jan 7, 2023
CSS Tooltips built on Tether. #hubspot-open-source

Tooltip Tooltip.js is a Javascript and CSS library for creating styleable tooltips. Install Dependencies Tether Drop Installing via npm and bower will

HubSpot 714 Jan 2, 2023
Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4.

Bootstrap Tooltip Custom Class Extends Bootstrap Tooltips and Popovers by adding custom classes. Available for Bootstrap 3 and Bootstrap 4. Define you

Andrei Victor Bulearca 14 Feb 10, 2022
A lightweight JavaScript library for implementing tooltips.

Tooltipper A lightweight (1kB) JavaScript library for implementing tooltips. Installation Install via NPM: npm i -S tooltipper Install via CDN: <scrip

Kyle Andrews 9 Nov 2, 2022
Base62-token.js - Generate & Verify GitHub-style & npm-style Base62 Tokens

base62-token.js Generate & Verify GitHub-style & npm-style Secure Base62 Tokens Works in Vanilla JS (Browsers), Node.js, and Webpack. Online Demo See

Root 4 Jun 11, 2022
jQuery plugin for showing a calendar yearview with blocks (github contributions style)

calendar-yearview-blocks jQuery plugin for showing a calendar yearview with blocks (github contributions style) Code adopted from https://github.com/b

Opbod 2 Feb 28, 2021
Examples of how to do query, style, dom, ajax, event etc like jQuery with plain javascript.

You (Might) Don't Need jQuery Frontend environments evolve rapidly nowadays and modern browsers have already implemented a great deal of DOM/BOM APIs

NEFE 20.3k Dec 24, 2022
Chrome style tab-resizing for jQuery UI tabs

stretchy tabs Chrome style tab-resizing for jQuery UI tabs stretchy tabs provides methods for adding and removing tabs ##Initialize stretchy tabs $( "

Adam Jimenez 8 Nov 19, 2021
Simple Cropper is a jQuery plugin which gives you ability to add cropping functionality to your web application

Simple Cropper is a jQuery plugin which gives you ability to add cropping functionality to your web application. It uses html5 canvas to create cropped images and css3, so it only works on latest browsers.

null 1 Feb 15, 2022
jQuery-plugin for add/remove dom-items with renaming form-elements (arrays)

dynamicrows jQuery-plugin for add/remove rows by cloning existing row / renaming form-elements (arrays). Requirements jQuery >=2.0 if move-action used

Dennis Dohle 0 Nov 9, 2020
JQuery charCounter - jQuery Character Counter Plugin

jQuery Character Counter A jQuery based character counter for <input> and <textarea> HTML tags. What is this? This simple plugin allows you to add a c

mmmm_lemon 1 Aug 10, 2022
jQuery quick notification plugin. jQuery плагин быстрых уведомлений

Note: English translation by Google Translate Notific About Description: this is a jQuery plugin that helps you display notifications on your site. Li

Webarion 2 Nov 7, 2021
A utility that mutates and transforms a style-dictionary object into something Figma Tokens plugin understands

Brought to you by Style Dictionary To Figma A utility that transforms a style-dictionary object into something Figma Tokens plugin understands. Used b

‹div›RIOTS 74 Jan 4, 2023
With this plugin, you can easily make a stopwatch or timer on your site. Just init, style and enjoy.

TimezZ With this plugin, you can easily make a stopwatch or timer on your site. Just init, style and enjoy. Features Typescript support Support all en

Valery Strelets 37 Dec 5, 2022
A variety of jQuery plugin patterns for jump starting your plugin development

jQuery Plugin Patterns So, you've tried out jQuery Boilerplate or written a few of your own plugins before. They work to a degree and are readable, bu

jQuery Boilerplate 1.6k Dec 31, 2022
This is a simple Image popup Jquery plugin. With a very simple configuration, you can show a popup on your webpage. By the way, this plugin works after page load.

Jquery-SingleImagePopup This is a simple Image popup Jquery plugin. With a very simple configuration, you can show a popup on your webpage. By the way

Rajan Karmaker 1 Aug 22, 2022
Here I will add daily one problem with solution basic to advance level and try to add multiple solutions of a single problem.

#100-code-days ?? I am adding daily 1 JavaScript solution here ?? and you can fork the repo for add your solution for any specific probelm ⌛️ Day 01:

Amir Sohel 4 Jan 22, 2022