Updated tipTip with new features

indyone's Avatar

indyone

03 Jun, 2011 03:03 PM

This jQuery tooltip lib is really good, fast, customizable and easy to use.. Thank you Drew Wilson!
Well, i took the opportunity to improve TipTip and also fix a few bugs. It is based on the 1.3 version (Mar. 23, 2010) and has been tested with jQuery 1.5.x (although it may work without problems with 1.6.x)

The updated tipTip is attached in this post.

What's New:

  • All callback functions when called, "this" refers to the element that is applied the TipTip and also receive an argument which is an object with the some useful values.

    { holder: tiptip_holder, content: tiptip_content, arrow: tiptip_arrow, options: opts }

  • The option "content" can also be a callback function that must return a string or HTML. This callback function will be called every time the tooltip is shown. Very useful for ajax generated tooltips. For example:

    $j('#my-element').tipTip({

      maxWidth: 600,
      defaultPosition: 'right',
      content: function (e) {
          $.ajax({ url: 'myJsonWebService.php', success: function (response) {
              e.content.html(response); // the var e is the callback function data (see above)
          });
          return 'Please wait...'; // We temporary show a Please wait text until the ajax success callback is called.
      }
    

    });

  • If "enter" and "exit" callback function return false, then the tooltip won't be shown or hidden respectively.

  • Added option "afterEnter" which is a callback function that is called after a tooltip is shown.
  • Added option "afterExit" which is a callback function that is called after a tooltip is hidden.
  • Fixed option "maxWidth" so that it is applied each time a tooltip is shown. It seems that using the cssClass option (see below) is a better way to do this.
  • Added option "cssClass" which is applied to the tiptip holder before shown. You can apply more than one css classes by seperating them with a space character (see also jQuery.addClass).
  • Added methods to "show", "hide" or "destroy" a TipTip. For example:

    $('#my-element').tipTip({ content: 'Hello world!' }); // We apply a tooltip with the text Hello world! on #my-element $('#my-element').tipTip('show'); // This will programmatically show the applied TipTip without the need to hover over the element. $('#my-element').tipTip('hide'); // we hide it $('#my-element').tipTip('destroy'); // and then we destroy it which means the element #my-element no won't have a TipTip applied.

  • The option "activation" can have the value "manual". In this case no events will be applied to the element and the developer will be responsible to show or not the tooltip. But you can always use the show and hide methods to show or hide the tooltip ;-)

  • Created an alternate look & feel for TipTip, you can use it by setting the option "cssClass" to "alternative".
  1. 1 Posted by Enrique ramírez on 28 Jun, 2011 06:16 PM

    Enrique ramírez's Avatar

    This is a wonderful update to an already awesome plugin! Thanks for this, I'm loving the additions!

    I'm having a terrible time trying to get the tooltip to display properly after an ajax call to update the content, though.

    Try this:

    defaultPosition: 'top',
    content: function(e) {

    $.ajax({
        url: 'newcontent.php',
        success: function (response) {
            e.content.html(response);
        }
    });
    
    return 'Loading comment. Please wait...';
    

    }

    And make the returned ajax content to be taller than the "loading comment. Please wait..." Both the tooltip and it's arrow will be misplaced horribly. Having the tooltip to display at the bottom by default somewhat fixes things, but if for whatever reason it doesn't have enough space at the bottom it'll appear at the top, and break again. (attached sample screenshot).

    Basically, is there a way to re-calculate the position of the tooltip after an ajax generated content call has been succesful? I've tried hiding and re-showing the tooltip after it, but to no avail.

  2. 2 Posted by Enibas on 29 Jun, 2011 12:13 PM

    Enibas's Avatar

    I have a problem with the modified version 1.3.

    my few options:

    $(function(){
    if ($(".tooltip").length) $(".tooltip").tipTip({maxWidth: 120, defaultPosition: "top"});
    });
    

    After the update the title of the first hovered elements is used in all the tooltips on this page. Even the title attribute is removed only from the first element. For all other elements in addition to the tooltip also displays the browser-specific title. What can I do?

  3. 3 Posted by Randy on 11 Aug, 2011 07:04 PM

    Randy's Avatar

    At least one problem with this version is in line 57.

    opts = (data && data.options) || $.extend(defaults, options),

    should be

    opts = (data && data.options) || $.extend({}, defaults, options),

    Without this change, "defaults" becomes a shared object of all tiptip instances.
    In particular opts.content would be shared and thus all tool tips (not created by a opts.content === function) would be the same.

    Probably the tool tip itself should not be stored in opts, but rather in the callback_data object ?

  4. 4 Posted by Andrew Hao on 01 Dec, 2011 12:30 AM

    Andrew Hao's Avatar

    Any way you can put this on github? Seems like there's a loose collection of forks off of Drew Wilson's (https://github.com/drewwilson/TipTip) and it'd be cool to have community involvement.

  5. 5 Posted by indyone on 01 Dec, 2011 11:21 AM

    indyone's Avatar

    Andrew that was a really good idea... I forked Drew's repo and added my modifications. You can find my repo at https://github.com/indyone/TipTip
    I have also update my fork with the latest updates i have done.
    All bugs that were mentioned here are fixed (thanks guys) and also i rewrote the positioning function to support RTL languages correctly, plus improvements to place the tooltip correctly when off the edge.

    Please do try it out and tell me what you think. Later, I will find some times and give you full examples of how to use it.

  6. 6 Posted by Randy Roesler on 09 Mar, 2012 05:35 AM

    Randy Roesler's Avatar

    If you want to make the tiptip's interactive (so they can contain a form or a facebook button or something) ...

    Patch based on your current github .. if you want I can fork and do a pull request for you.

    (I think Drew is a brilliant designer based on the things that he has done, seems to start lots of things)

    (also have a variation on CSS if your interested)

    31,32c31,33
    < fadeIn: 200, // The length in msec of the fade in.
    < fadeOut: 200, // The length in msec of the fade out.
    ---
    > fadeIn: 200, // The length in msec of the fade in.
    > fadeOut: 200, // The length in msec of the fade out.
    > retain: 400, // The dealy on fade out fo user can move mouse into tip
    150,151c151,160
    < tiptip_holder.stop(true, true).fadeIn(opts.fadeIn);
    < }, opts.delay);
    ---
    > tiptip_holder.stop(true, true).fadeIn(opts.fadeIn);
    > }, opts.delay);
    >
    > // make tiptip sticky when mouse enters
    > tiptip_content.unbind("mouseenter.tipTip");
    > tiptip_content.unbind("mouseleave.tipTip");
    > tiptip_content.bind("mouseenter.tipTip", function () {
    > tiptip_content.bind("mouseleave.tipTip", deactive_tiptip);
    > if (timeout) { clearTimeout(timeout); }
    > });
    167,169c176,179
    < }
    <
    < tiptip_holder.fadeOut(opts.fadeOut);
    ---
    > }
    >
    > //tiptip_holder.fadeOut(opts.fadeOut); // give user a chance to put mouse in tooltip
    > timeout = setTimeout(function () { tiptip_holder.stop(true, true).fadeOut(opts.fadeOut); }, opts.retain);

    Randy Roesler

  7. 7 Posted by breity10 on 28 Jul, 2012 12:55 AM

    breity10's Avatar

    @inydone, thanks so much for these new features and fixes! They are really great. I just forked your github repo and added a couple things myself:

    • I included a fix for the flickering issue that can sometimes occur when the mouse hovers over the edge of the tooltip's trigger element (which was caused by the tooltip_arrow overlapping the trigger).

    • I made tooltips hide when the user clicks anywhere on the page other than on the tooltip itself when the keepAlive option is set to true (in addition to the default behavior of the tooltip hiding when the mouse leaves the tooltip element). This was taken from the miniTip plugin and other tooltip implementations where this behavior is common.

    You can see my changes here: https://github.com/breity/TipTip. I also made a pull request in case you want to include them.

    Thanks again!

  8. 8 Posted by Jakob on 14 Nov, 2012 10:04 PM

    Jakob's Avatar

    Hi,

    Thank you everybody involved in the development of TipTip, it's fantastic!

    I'm a total rookie to javascript and I can't seem to find a solution to my "problem". What I want is to use the " activation: 'hover' ", and when I remove the mouse from the div-element I wan't the tooltip to disappear, still I wan't to be able to hover the mouse over the actual tooltip to click on a link for an example.

    I'm using the title-attribute from an image.

    Any solution to that?

  9. 9 Posted by Jakob on 14 Nov, 2012 10:29 PM

    Jakob's Avatar

    Anyone else have experienced the same bug as this one with the updates posted above?

  10. 10 Posted by randy on 15 Nov, 2012 05:35 AM

    randy's Avatar

    RE: being able to enter tool tip to click on links ...

    I'm using tiptip-1.3-3 .. I did not think I have any local mods but in case I did ...
    Check is the activate function contains

                // make tiptip sticky when mouse enters 
                tiptip_content.unbind("mouseenter.tipTip");
                tiptip_content.unbind("mouseleave.tipTip");
                tiptip_content.bind("mouseenter.tipTip", function () {
                    tiptip_content.bind("mouseleave.tipTip", deactivate );
                    if (timeout) {
                        clearTimeout(timeout); 
                    }
                });
    
  11. 11 Posted by Jakob on 15 Nov, 2012 07:56 AM

    Jakob's Avatar

    RE: I'm using tiptop-1.3-3 .. I did...

    Thanks for your fast reply!

    Which version is 1.3-3? In all of the versions I've looked through everyone is just called 1.3. And that piece of code you wrote I can't find in any of the versions, and when I try to include it, it doesn't work. Any suggestions?

    I still get that original yellow ugly title-window, do you know why?

    Really appreciate your help!

  12. 12 Posted by Randy Roesler on 15 Nov, 2012 03:01 PM

    Randy Roesler's Avatar

    Attached my notes on Tip Tip ... and the actual code I'm using
    (I have had to debug it a couple of times so it probably does not match GIT precisely)

    Yellow windows contains HTML ? My first guess would be $(xxx).text( something ) instead of $(xxx).html(something).

    Also, based on the html using tables for layout ... it looks like html written for email ?
    Or very old browsers ... newer jQuery does not support quirks modes and HTML used in email (and such).
    (That would be html 2 stuff and IE 4,5 and 6) (No quirks, 7 and above should generally be ok),

    Randy Roesler

  13. 13 Posted by Jakob on 03 Mar, 2013 11:22 AM

    Jakob's Avatar

    Sorry for bringing this up again but the problem I mentioned above about the yellow title-popup still exists, but only in IE. I've tried to remove all HTML inside the 'title' attribute but without succeeding.

    I'm a rookie at javascript so the thing you wrote about "My first guess would be $(xxx).text( something ) instead of $(xxx).html(something)." I don't really understand. The code I have for TipTip looks like this right now:

    $(function(){ $(".tooltip").tipTip(); });

    Any suggestions how to get rid of this bug in IE?

    Thanks!

  14. 14 Posted by Randy Roesler on 04 Mar, 2013 08:50 PM

    Randy Roesler's Avatar

    There is not enough information in your screen shot to debug what is going wrong for you on IE.

    Regards "My first guess would be $(xxx).text( something ) instead of $(xxx).html(something)."

    .text and .html are jQuery functions for setting the contents of an element.

    As a rookie, I guess you are not using jQuery directly yourself, just using a few libraries like TipTip that you find useful.

    The problem you are experiencing might be in TipTip or it might be more general, there is just not enough information here
    for anybody to help you out. I just can not say.

    ________________________________________
    From: Jakob [[email blocked]]
    Sent: March-03-13 3:22 AM
    To: Randy Roesler
    Subject: Re: Updated tipTip with new features [TipTip jQuery Plugin #70]

  15. 15 Posted by Jakob on 04 Mar, 2013 10:52 PM

    Jakob's Avatar

    Tanks Randy,

    What do you need more specificly to start helping me out?

    Jakob

  16. 16 Posted by Randy Roesler on 06 Mar, 2013 04:59 AM

    Randy Roesler's Avatar

    Hi Jakob

    I do not know anything about your code base so it is hard to advise what might be need.
    If the code is on a public facing website then somebody could possibly connect and look at the javascript.
    Otherwise, you might have to zip up the whole code base.

    BETTER would be if you made a minimalist web page which demonstrated the issue.

    And not that Drew would complain, but support forums are really not the place for people to tutorial each other.
    The back and forth of these messages are not going to help others us tiptip in the future, so these messages are just noise in the forum.

    If you start with one of Drew's working examples, and slowly modify it until you get the tool tip you want, you will probably find the issue in short order.
    If Drew's example does not work for you, then there might be something broken in your browser setup.

    This e-mail may contain information that is privileged, confidential or otherwise exempt from disclosure under applicable laws. Unauthorized use, reproduction or dissemination of the e-mail is strictly prohibited. If you have received this e-mail in error, please contact the sender immediately. [87FBLP261PL]

  17. 17 Posted by Jakob on 07 Mar, 2013 09:19 AM

    Jakob's Avatar

    Hi Randy,

    Thanks for your answer. I understand the situation but I want to give it a try if you guys could help be, being desperate here...

    Here's a minimalistic test that you can look at (hover the image in ex IE9):
    http://www.wolfhagen.nu/tiptip.php

    The actual problem can be seen here:
    http://www.wolfhagen.nu/ie.png

    Thanks, hope I don't make a mess here.

  18. 18 Posted by Randy Roesler on 08 Mar, 2013 07:46 AM

    Randy Roesler's Avatar

    Your CSS does not look correct .. I means it is valid, just not working

    1) at some points you set border-color and at overs you override border-bottom-color (etc) which does not always work.
        If your are going to use the full css property, ie border-bottom-color, then you should not use shorthand, ie border-color.
        (as some browsers do not handle it right ... especially for borders, and backgrounds)

    2) The rgba colors are causing ie to ignore the fallbacks (in some cases)

    I did not get your sample fully working .. but I did notice those things.

    If I can, I look again tomorrow night
    ________________________________________
    From: Jakob [[email blocked]]
    Sent: March-07-13 1:19 AM
    To: Randy Roesler
    Subject: Re: Updated tipTip with new features [TipTip jQuery Plugin #70]

  19. 19 Posted by Randy Roesler on 08 Mar, 2013 04:33 PM

    Randy Roesler's Avatar

    In your picture "CONTENT CONTENT CONTENT" is shown twice, once with black background and once with white background.

    This is just the browser being nice, it is taking the title of the image element and showing it to the user.

    Change the attribute used to show the text from "title" to something else (like "tooltip")
    Or move the tool tip to some other element, like the anchor

    Change CSS like so

    #tiptip_arrow, #tiptip_arrow_inner {
            position: absolute;
            border-bottom-color: transparent;
            border-top-color: transparent;
            border-right-color: transparent;
            border-left-color: transparent;
            border-style: solid;
            border-width: 6px;
            height: 0;
            width: 0;
    }

    // do not use rgb with IE
    #tiptip_holder.tip_bottom #tiptip_arrow {
            border-bottom-color: #111;
            border-bottom-color: rgba(25,25,25,0.92);
    }

    and ... at least you simple example should display correctly

    Originally you were trying to put something quite complex into the tooltip.
    Start rebuilding of that complex structure slowly, and you should be fine.

    ________________________________________
    From: Jakob [[email blocked]]
    Sent: March-07-13 1:19 AM
    To: Randy Roesler
    Subject: Re: Updated tipTip with new features [TipTip jQuery Plugin #70]

  20. 20 Posted by Jordan on 05 Jan, 2014 08:37 PM

    Jordan's Avatar

    Exactly where could I find this particular Weblog platform FOR drew.tenderapp.com ? wish you luck in New Year!

  21. 21 Posted by Dominique Leuth... on 07 Jan, 2014 11:39 AM

    Dominique Leuthauser's Avatar

    We want to start a celebrity blog, like Perez Hilton. But how do we create a blog, with two people writing? Also how do we get celebrity gossip? We would like to know all the steps to get this blog popular in the world and how to start it.. wish you luck in New Year!

  22. 22 Posted by Zeledon on 08 Jan, 2014 12:39 AM

    Zeledon's Avatar

    As I look at the major courses for both it seems that I can take screen writing and film courses as my general major elective as a English major. When I choose a minor which can be creative writing or film studies, I'm having a hard time because I want to pursue a career as a screenwriter for film as a secondary job for myself, but wouldn't Creative Writing help me with that?.

  23. 23 Posted by Kapler tour in ... on 15 Jan, 2014 09:23 PM

    Kapler tour in paris Moon's Avatar

    I know there are lots of firefox addons that help manage saving pictures, but what I am specifically looking for is, one which can allow me to simply paste the picture link and it will download the picture from that link. . Reason being, the pictures I am saving is has their own individual link and NOT on the same page itself..

  24. 24 Posted by можно ли вылечи... on 19 Jan, 2014 09:09 PM

    можно ли вылечить простатит's Avatar

    Just thought I'd drop you a line to tell you your drew.tenderapp.com really rocks! I have been looking for this sort of information for a long time.. I don't usually reply to posts but I will in this case. WoW terrific great. wish you luck in New Year!

  25. 25 Posted by kfgjhjcrjgbz on 25 Jan, 2014 09:59 PM

    kfgjhjcrjgbz's Avatar

    hi!!!i love one tree hill!its good!!!james lafferty and chad murray are bautiful!!!brook is cool she is bautiful!!the actors of series are good!i love it!!!!bye fans of tree hill He who does not know one thing knows another 41urology.ru

  26. 26 Posted by railroad insula... on 25 Feb, 2014 08:44 PM

    railroad insulators's Avatar

    Hey, I am new to blogging and internet sites in general and was curious about how you got the "www" included in your web address name? I see your web address, "drew.tenderapp.com" has the www and my domain looks like, "http://mydomain.com&quot;. Do you know the best way I can alter this? I'm using Wordpress platform. Thanks for your time

  27. 27 Posted by escorte Paris on 21 Mar, 2014 06:47 PM

    escorte Paris's Avatar

    Howdy! I know this is kind of off topic but I was wondering if you knew where I could find a captcha plugin for my comment form? I'm using the same blog platform as yours and I'm having problems finding one? Thanks a lot!

  28. 28 Posted by Chris on 19 Jun, 2014 01:23 PM

    Chris's Avatar

    Hi new version is great!
    im not sure if its good place to hit but i tried to get nuget package via nuget package manager in visual studio and package says its 1.3 version but code in that package is older that 1.3

    Best,
    Chris

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Already uploaded files

  • tipTipv13_modified.zip 4.95 KB

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac