defaultWidth ignored on multiple TipTips

Paul Rathey's Avatar

Paul Rathey

18 May, 2010 08:29 PM

Hello Drew...firstly...fantastic work here. I've rarely seen such attractive and lightweight/efficient work.

I've got a spot of trouble however. I'm trying to apply two different sets of TipTips to two different sets of elements, with different parameters for defaultWidth, defaultPosition, keepAlive, etc.

Now, on the second application of TipTip, the defaultWidth property seems to retain the first application's setting...clearly not desirable.

Any thoughts?

Here's the snippet of where I'm calling this (inside a $(document).ready block):

$(".pedia").tipTip({ keepAlive: true,
maxWidth: "400px"

$(".related a").tipTip({ defaultPosition: "bottom",
maxWidth: "200px"



  1. 1 Posted by eisstern on 27 May, 2010 08:05 AM

    eisstern's Avatar

    I had the same problem and overcame it with support of a collegue. We don't know if it is the correct solution (we expect it's NOT, see end of post), but in our case it works.

    When you open the js, search for "if($("#tiptip_holder").length <= 0){".
    Some lines below starts the else part. In the uncompressed file it's at line 46.

    We changed the whole content of the else to the content of the if (copy&paste)

    var tiptip_holder= $('

        var tiptip_content=$('<div id="tiptip_content"></div>');
        var tiptip_arrow=$('<div id="tiptip_arrow"></div>');
        $("body").append(tiptip_holder.html(tiptip_content).prepend(tiptip_arrow.html('<div id="tiptip_arrow_inner"></div>')))

    In the end, it makes no sense to keep the if/else up, since they now contain the same code. But we kept it to remeber the structure.

    There must be a reason to have the if/else there, so make absolutely sure this change is not breaking anything on your website!

  2. 2 Posted by eisstern on 27 May, 2010 08:12 AM

    eisstern's Avatar

    Sorry for messing up the formatting.... the code shold look like this:

        var tiptip_holder= $('<div id="tiptip_holder" style="max-width:'+opts.maxWidth+';"></div>');
        var tiptip_content=$('<div id="tiptip_content"></div>');
        var tiptip_arrow=$('<div id="tiptip_arrow"></div>');
        $("body").append(tiptip_holder.html(tiptip_content).prepend(tiptip_arrow.html('<div id="tiptip_arrow_inner"></div>')))
  3. 3 Posted by Paul Rathey on 28 May, 2010 05:32 PM

    Paul Rathey's Avatar

    Thanks eisstern...

    That's a very sensible fix (I had not yet bothered to explore the unminified js).

    Here's hoping Drew makes an official adjustment to this in the future.

    Thanks again for your help.

  4. 4 Posted by Jake Noble on 22 Jul, 2010 06:32 PM

    Jake Noble's Avatar

    Are we talking about maxWidth here?

    The width options seem a bit useless, what if I want to force a width? There does not seem to be a way of forcing the box to have a specific width?


  5. 5 Posted by JSpinny on 07 Sep, 2011 04:53 PM

    JSpinny's Avatar

    This helped me a lot thank you. The plugin was ignoring my maxWidth propery when I had a lot of content that needed to be in a tooltip. This "patch" fixed it and now I can set it how I want.

  6. 6 Posted by Orgy on 02 Aug, 2012 09:52 AM

    Orgy's Avatar

    Guys, check this out. It's a much better patch for that.

Reply to this discussion

Internal reply

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

Attaching KB article:


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


? 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