jaz303 / tipsy Goto Github PK

View Code? Open in Web Editor NEW

2.0K 2.0K 560.0 708 KB

Facebook-style tooltips plugin for jQuery

Home Page: http://onehackoranother.com/projects/jquery/tipsy/

License: MIT License

Ruby 5.64% JavaScript 94.36%

tipsy's Introduction

tipsy

Facebook-style tooltip plugin for jQuery

Released under The MIT License.

Description:

tipsy is a simple jQuery plugin for generating Facebook-style tooltips.

It's used by Twitter, Github, Slideshare and Bitbucket, amongst others.

Homepage:

http://onehackoranother.com/projects/jquery/tipsy

Source:

Hosted at GitHub; browse at:

http://github.com/jaz303/tipsy/tree/master

Or clone from:

git://github.com/jaz303/tipsy.git

Usage:

Copy the contents of src/{images,javascripts,stylesheets} to the corresponding asset directories in your project. If the relative path of your images directory from your stylesheets directory is not "../images", you'll need to adjust tipsy.css appropriately.

Insert the neccesary elements in your document's <head> section, e.g.:

 <script type='text/javascript' src='/javascripts/jquery.tipsy.js'></script>
 <link rel="stylesheet" href="/stylesheets/tipsy.css" type="text/css" />

Remember to include jquery.tipsy.js after including the main jQuery library.

Initialise Tipsy in your document.onload, e.g.:

 <script type='text/javascript'>
  $(function() {
    $('a[rel=tipsy]').tipsy({fade: true, gravity: 'n'});
  });
 </script>

Please refer to the docs directory for more examples and documentation.

tipsy's People

Contributors

Stargazers

Watchers

Forkers

vanntastic appel troyk wombleton fei0456116 ionas robcowie ronenli adamli hexa2k9 ankit phoenix24 rodi01 vicb corneldm hypernurb pfeiffer jaksys samuelcole citrus eveevans sgibbons javan lukom scriptmaster tommoor rctay michaelchee laszlopapp kus bistory rgee cue eriik nguyennamtien verto saks voxpelli gijs khaledalhourani mattketmo florianguenther jeffplang aseemk kavousi rakesh-sankar datadog knowbook hebo duellsy dhireneve rayners complex857 bigmlcom mikhailxu rahimsiz hermanschutte johnnyhg costa henrik meandmymonkey amirabu nuarharuha lbustamante liangzhang juliancantillo codingourweb tbasse tgarnett mikevhoenselaar magcius thegrandpoobah lupikovoleg opendream custommade ionelmc hellowallet guniorobot lucastex espinozaulises n8agrin stipple jisaacks pcout taherscherzay leamiko marcgg zyll zuhauseli toolness boobiq 1999 iamromeo schooch adamggg abhidilliwal farnoux tsouloftas foksh sheuer

tipsy's Issues

Switch to pure CSS arrows

Checking to see if it's cross-browser compatible first, of course

Not working in IE or FF

Hi, love the script, unfortunately i cannot get it to work in IE or FF. Can you help?
Here is the link: http://www.bigchairdesign.com/new/portfolio.html

Works great in chrome...

EDIT : my bad, it works.

Tipsy's "fade: true" hard-codes the final opacity to 0.8

After attempting to modify the final opacity for tipsy's popup to 1.0 and having no luck, I looked into the source and discovered it was hard-coding it.

I had to edit tipsy to get 1.0 opacity on my setup and this shouldn't be necessary for something reusable like a jQuery plugin.

Allow custom CSS (class) to a specific tip

It would be nice if tipsy takes an option to define custom css class/properties so I can make a customized tip for a special element.

For example:

$('#search-box').tipsy({className:'search-tip'});

in css:
.search-tip {
padding: 3px 10px;
font-size: 15px;
}

Incorrect position when on absolute element on Chrome (fix included)

I fixed a bug that happened on Chrome, the tipsy's are not correctly positioned when they are set on a absolute-positioned element.

The fix is simple, on line 25, remplace the block by that :

            var pos = $.extend({}, this.$element.offset(), {
                width: $(this.$element[0]).width(),
                height: $(this.$element[0]).height()
            });

I hope it will help you !

Performance in Internet Explorer 6/7/8 -- "Stop running this script?" warning

Great plugin, but I have a problem in IE on a page where it's used extensively I've it's generating the following warning:

"Stop running this script?

A script on this page is causing your webbrowser to run slowly. If it continues to run your computer may become unresponsive."

For an example, browse to this page in IE:
http://www.learningpool.com/course-catalogue/?resource=images&text=london

Any help would be appreciated.

Why the need to have Multiple ID's?

For the same thing?

I want all the Tips to Fade from the West.
Adding the ID - west only makes the first one work. The rest are ignored.

If the Element is a HTML Tag though - like Input - it will do the lot all the same.

Would you like to see support for extra gravities?

i.e. 8 compass points instead of 4

I've been thinking about this for ages now, pretty much since I released the project. If enough people vote this up I'll look at adding it in.

-J

Tips don't disappear when elements do

Hi,

I have a table of data. On some items, there is an associated tipsy. The content of the table is periodicaly updated (the content of a specific tag is replaced).

Sometimes, an activated tipsy stays visible after the content replacement. As a result I have several zombie tipsies on my page.

Looking at the source code, I can see that I have many divs created by Tipsy.

I've tried to use the "live" option. It allows me not to rebind tipsy to my items after each update, but it doesn't solve this issue.

Is it something normal (as in "an edge case that I'm the only one to have") or I'm using it the wrong way ?
Anyway, I'd appreciate some directions.

Thank you for this great and very useful jquery plugin

Tipsy Won't Show Up in Facebox

Hi. . . Your plugin kinda don't work on Facebox. . . Can u help me?

Is it possible to set tooltip 'width' with js codes? I don't want to set tooltip width with css. I am using your tooltip for text and images. Sometimes i got big images. So pictures overflows tooltip. If i can set tooltip width with js i can select custom width's for custom class or id's. Thank you, for your great work... For example:

$('.text').tipsy({width: 200});
$('#image-1').tipsy({width: auto'});

Live and elementOptions aren't friends

When using the live option together with the $.fn.tipsy.elementOptions override to get the gravity from an data attribute on the element, the tooltips override each others gravity.

Example

$.fn.tipsy.elementOptions = function(elem, options) {
    options.gravity = $(elem).data('tipsy-gravity') || options.gravity;
    return options;
};

<li class="tip" data-tipsy-gravity="n" title="test">test</li>

typo in docs

You got a typo "Wob 2.0" in /docs/src/index.html.erb in line 103.

Replacing native tooltips using live event tipsy doesn't work

When I try:

$('[title]').tipsy({live: true});

Tipsy tooltips don't disappear. Anyone have a fix/workaround for this?

Using tipsy version 1.0.0a with jquery 1.4.2

Little black arrow misplaced and fixed to the screen

It happens to me that when I add a tipsy tootip to a big text input field there is a black arrow. A picture is worth a thousand words:
http://img406.imageshack.us/img406/4645/bugtipsy.png

I hope it helps, and you can fix it. Thanks

Compatibility with IE border-radius .htc behavior files

I've had no luck using border-radius.htc or css3pie.htc to correct the square corners in MSIE8 or lower. CSS3PIE simply turns the entire tip transparent, while border-radius has some really wacky z-index issues plus won't remove the tip bubble on mouseout.

Cheers

Tipsy vulnerable to race conditions in show/hide

Tipsy is vulnerable to flickering the tooltip and leaving it undisplayed if the user moves their mouse over the associated element, out, and then in again quickly as part of getting the pointer into place. (eg. Crossing over the element in question and then moving the pointer back into it)

All it takes is for the operation to complete before the animation finishes. I've left it unfixed on http://gbindex.ssokolow.com/?story=9 for now if you want to try it. (There's a tipsy popup on the "spoiler" pattern)

Changing tip.css(...).animate(...) to tip.stop().css(...).animate(...) in the show callback fixes the problem.

There's another bug with the same effect that happens if you do it REALLY fast, but you have to do it so quickly that it becomes almost impossible to trigger for any screen region small enough to merit a tipsy popup.

I've confirmed the bug as present in Google Chrome, Arora (another WebKit browser), and current Firefox.

mouse gravity

i added mouse gravity in addition to n,e,s,w gravity.
$("#treeview a").tipsy({gravity: 'em'});
will display tooltip with east gravity but at mouse position

diff file

--- jquery.tipsy.js 2011-02-20 15:55:14.001454000 +0200
+++ jquery.tipsy-1.0.0.js   2011-02-20 15:55:17.151050000 +0200
@@ -19,11 +19,11 @@
     }
     
     Tipsy.prototype = {
-        show: function() {
+        show: function(event) {
             var title = this.getTitle();
             if (title && this.enabled) {
                 var $tip = this.tip();
-                
+
                 $tip.find('.tipsy-inner')[this.options.html ? 'html' : 'text'](title);
                 $tip[0].className = 'tipsy'; // reset classname in case of dynamic gravity
                 $tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).appendTo(document.body);
@@ -41,25 +41,39 @@
                 var tp;
                 switch (gravity.charAt(0)) {
                     case 'n':
-                        tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2};
+                       if(gravity.length == 2 && gravity.charAt(1) == 'm')
+                           tp = {top: event.pageY + this.options.offset + 20, left: event.pageX - actualWidth / 2};
+                       else
+                           tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2};
                         break;
                     case 's':
-                        tp = {top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2};
+                       if(gravity.length == 2 && gravity.charAt(1) == 'm')
+                           tp = {top: event.pageY - actualHeight - this.options.offset - 5, left: event.pageX - actualWidth / 2};
+                       else
+                           tp = {top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2};
                         break;
                     case 'e':
-                        tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth - this.options.offset};
+                       if(gravity.length == 2 && gravity.charAt(1) == 'm')
+                           tp = {top: event.pageY - actualHeight / 2, left: event.pageX - actualWidth - this.options.offset - 10};
+                       else
+                           tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth - this.options.offset};
                         break;
                     case 'w':
-                        tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width + this.options.offset};
+                       if(gravity.length == 2 && gravity.charAt(1) == 'm')
+                           tp = {top: event.pageY - actualHeight / 2, left: event.pageX + this.options.offset + 10};
+                       else
+                           tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width + this.options.offset};
                         break;
                 }
                 
-                if (gravity.length == 2) {
-                    if (gravity.charAt(1) == 'w') {
+                if (gravity.length == 2) 
+                {
+                   if (gravity.charAt(1) == 'w')
                         tp.left = pos.left + pos.width / 2 - 15;
-                    } else {
+                    else if (gravity.charAt(1) == 'e')
                         tp.left = pos.left + pos.width / 2 - actualWidth + 15;
-                    }
+                    else if (gravity.charAt(1) == 'm')
+                       gravity = gravity.charAt(0);
                 }
                 
                 $tip.css(tp).addClass('tipsy-' + gravity);
@@ -128,13 +142,13 @@
             return tipsy;
         }
         
-        function enter() {
+        function enter(event) {
             var tipsy = get(this);
             tipsy.hoverState = 'in';
             if (options.delayIn == 0) {
-                tipsy.show();
+                tipsy.show(event);
             } else {
-                setTimeout(function() { if (tipsy.hoverState == 'in') tipsy.show(); }, options.delayIn);
+                setTimeout(function() { if (tipsy.hoverState == 'in') tipsy.show(event); }, options.delayIn);
             }
         };

When a tooltipped object is deleted while the tooltip is shown, the tooltip never disappears (as there will be no mouseout event)

Calling $obj.tipsy('hide') breaks on non-tipsy-fied obj

If you have a jQuery object and you call

$obj.tipsy('hide');

when $obj hasn't been tipsy-fied yet, you get

Uncaught TypeError: Cannot read property 'hide' of null

You might ask "well, why would you do that?" The answer is that I'm using live: true to make $obj tipsy on an as-needed basis; if you make the $obj.tipsy('hide'); call after someone's hovered over it, you don't get an error.

I've taken to using

if ($obj.data('tipsy')) { $obj.tipsy('hide'); }

as a workaround, but this is obviously a hack.

kill() or a simple unbind() method.

Hi there,

in my use case i need to unbind the jQuery.tipsy() plugin or the hover effect who was setted up by tipsy(). The problem is the configuration in tipsy().

Please implement a simple unbind method:

jQuery('selector').tipsyUnbind();

Greets,
Marc

Tooltip position not updated for elements that move

It will be great if we can set an options or make it default for the tpoltip to move with the element. For example if I have a jQuery UI slider and I make a tipsy for the slider knob if I drag the slider the tip remain on the same position and after another hover it take the new coordinates.

It will be great if the mouse doesn't leave the knob and the dom element is dragged and moved the tooltop should move with it also.

CSS3 border-radius for Opera and IE9

The .tipsy-inner class definition only has the -moz-border-radius and -webkit-border-radius CSS properties. Opera 10.50 and IE9 (as far as I've understood) both support the more standard border-radius property only.

Hence, please add it :)

add option to enable/disable tipsy per element

Multiple Tips Same Direction Same Page Issue

Hi,

Nice one. Question. How do I load the same direction tips on the same page? If I set all my tips to east, only the first one in the first div loads, the rest dont. I need to load 24 in multiple directions, but the similarity of direction in some means I don't have many choices. I can load many from different directions but dont have too many choices.

Thanks

needed a way to specify a different css style for another tipsy within the document

Hi,

As per my title, I needed to specify a different .tipsy class for another element within the document.
Just to help those who share the same need, here's what I did:

I added a new entry in the default options in the js file. E.g. defaultClass: 'tipsy'
Replaced 'tipsy' with this.options.defaultClass in these 2 separate lines:

$tip[0].className = this.options.defaultClass; // reset classname in case of dynamic gravity

this.$tip = $('<div class="'+this.options.defaultClass+'"></div>').html('<div class="tipsy-arrow"></div><div class="tipsy-inner"/></div>');

If you want to specify a new class, enter it in the options
$('#ele').tipsy({defaultClass: 'newclass'});

Hope this helps someone! Thanks Jason for this awesome plugin!

Add option to manually trigger tipsy

Live tips not disappearing on mouseout

I recently moved some previously standard request data in my application to dynamically loaded ajax. Previous to the change I was using this tipsy code (which worked perfectly across the application):

$(function(){
$('[title]').tipsy({
gravity: 'w',
delayIn: 300
});
});

After the moving to an ajax request I changed the JavaScript to:

$(function(){
$('[title]').tipsy({
gravity: 'w',
live: true,
delayIn: 300
});
});

Tool tips now appear as normal, but are not removed on mouseout. The incorrect behavior occurs on all title attributes, not just those loaded with ajax.

Redundant tool tips (tipsy and native) appear in IE when live:true

When using tipsy 1.0.0a with live:true (and default options otherwise), the first time the mouse hovers over the trigger element, IE8 shows both the tipsy tooltip and the native tooltip. The second time the mouse hovers, this doesn't happen -- only the tipsy tooltip appears.

This doesn't happen when 'live' is false, probably because tipsy moves the title attribute out of the way well before the hover event happens, before IE has a chance to render it. A workaround is to use some attribute besides 'title', although that can cause pages not to validate.

Feature Request: Fadeout after mouseover For too long

An option to make the tool tip disappear after x seconds. I know there is a fade out option now, but that occurs once you have "moused out". So Ideally you hover over the element, tool tip appears, a few seconds later while you are still hovered, the tooltip fades away.

Tooltip shown

How can you make a tooltip shown by default on page load?

Tooltip position not updated for elements with 'position:fixed' on document scroll

I know these are all edge cases, but they'll help in making tipsy more robust! (I'm encountering them in my project! )

I have a fix here - http://github.com/ankit/tipsy/commit/9066506874d66ac67a6257f2f59af3be3d2dad0c

Feature request: Border color tipsy arrow

Is there a way to add a border to the tipsy arrow?

IE 8 strange issue

Hi,
This is an awesome plugin! Thanks!
I have an issue in IE8 though. I have the tooltips put up on my page menu links. They work fine in all the browsers, including IE6(with some minor issues), but this one in IE8 is killing me. When I visit my homepage, and hover over the links, the tooltip appears extremely away downwards from the link. When I visit some other page, or click on homepage link to see the homepage again, the tooltips appear normal! I tried an IE8 specific stylesheet but no luck!
Can you tell me what could be the reason?

[Feature request] Refresh/reload text

It'd be great if you could call refresh or reload on tipsy so it could refer back to the trigger element it's linked to, read the title (or whatever it's linked to), and update the text on the tooltip.

Superfluous slash breaks tipsy on IE 7 and 8 w/ jQuery 1.3.2

I had issues with tipsy on IE 7 and and IE 8 not displaying tooltips. tipsy's outermost div was added, but not the .tipsy-arrow and .tipsy-inner, thus causing tooltips not to show up.

Line 98 contains a superfluous slash that caused the issue:

<div class="tipsy-inner"***/***></div>

http://github.com/jaz303/tipsy/blob/master/src/javascripts/jquery.tipsy.js#L98

Don't hide tipsy when the tipsy is hovered

Have html content in tipsy like links etc, it would be nice to have an option to make tipsy stay open when it is hovered, so user has a chance to click those embedded link.

Tipsy IE Error

Tipsy work fine in Chrome and Firefox,

However when using ie.8, Tipsy only work for the first times hover.
For the second time I hover the link, tipsy not showing anymore but when mouse hover out from the link the tipsy show.

I use tipsy version 1.0.0a

Please help, where goes wrong :(

Thanks b4

Tipsy throws a JS error when hovering the element quick enough for the tt not to show

outdated files at http://plugins.jquery.com/project/tipsy ?

Thanks for tipsy - the 1.0.0a version, with "live" support is excellent.

One point: the Tipsy homepage (http://onehackoranother.com/projects/jquery/tipsy/#download) refers to the "live" option and offers a link to http://plugins.jquery.com/project/tipsy for downloading tipsy.

That page has 0.1.7 as the latest version - but 0.1.7 does not appear to have 'live" support (... at least, it didn't work for me). This is confusing.

Tipsy never hides

My tipsy box never hides, so I can have multiple tooltips at the same time.

When delayIn is set to a non-zero value, native tooltip is displayed

I set delayIn to 1000. The title of the element changes after the first initial call of fixTitle(), when tipsy() is initialized for the element.

In this case the native tooltip is displayed, since fixTitle() is only called after a delay of 1000ms.

I have fixed this issue in this commit - http://github.com/ankit/tipsy/commit/cc3d7359936a628e9bf3f44be24a0bf68f1b5b58

Thanks!

Rendering position bug on the iPad

There appears to be a bug with the tooltip's position on the iPad (probably on the iPhone as well, but I can't verify that right now) when the page is scrolled down.

One can reproduce that on the demo page right now (http://onehackoranother.com/projects/jquery/tipsy/) : Scroll down a bit then "hover" -- in the iPad way -- any link, and it will show at some different y-position in the page.

Might have something to do with this.$element[0].offsetHeight not being updated on the iPad?

delayIn and delayOut do not appear to work when title option set to non-default value

I believe that when the title option is set to something like say "tip" then the delayIn and delayOut options do not cause a delay to occur. The tip appears and disappears instantaneously.

Support live event handling

Tipsy is active if title empty

Currently tipsy shows an empty tip if the title is empty (like title="").
IMO it should only be active if there is a title != " " or ""

Image in a tipsy cause bad positioning

Hi, first of all, thanks for this great script!
I've encountered a problem if the content of the tipsy tooltip is an html tag and the gravity is set to 'e' or 'w' for example.
When the mouse is over the trigger element, the tooltip shows but the image is not loaded so anyone know the size of the image. The tooltip is shown far from the trigger element.
Another case is when the trigger is an image element and the tooltip is manually shown on document.ready().
How can we fix this?

Show/Hide onclick..?

Hi, is there a way i can make Tipsy show/hide on click?

the current example shows this method:

<a href='#' onclick='$("#manual-example a[rel=tipsy]").tipsy("show"); return false;'>Show</a>
<a href='#' onclick='$("#manual-example a[rel=tipsy]").tipsy("hide"); return false;'>Hide</a>

but i would love to have this combined into just one button..!

Tips don't move when window is resized

Using Manual Trigger on Form Submit Button

Is there a way for me to trigger tipsy manually using the same button that submits my form?