Tooltip positioning doesn't account for margin or padding on the .ui-tooltip-name element. For example, if the following style is applied to the dark theme:

.ui-tooltip-dark 
{
     padding: 10px;
}

The tooltip will be positioned an extra 10 pixels to the right and down and will need to be adjusted with the style.position x and y properties (ie. -10). The issue is most obvious when the "my center at center" positioning of the tooltip is used as it will no longer be centered.

On an iPad running iOS 3.2.2, if the page is at all zoomed when a tooltip is triggered, it's position is radically incorrect, unless the screen is scrolled all the way top and left. It behaves as if the position of the target assumes the viewport is the page. The tooltip is placed on the page where it would be if the screen were scrolled all the way top and left.

Interestingly, this behavior is correct on an iPhone running iOS 4.1, which suggests that it will change when iPads get the 4.x update. Still, if it is possible to correct this behavior in qTip, I think it makes sense to.

See http://craigsworks.com/projects/forums/thread-can-t-remove-the-word-loading-with-this-set-content-text?pid=5986

I think it's misleading to call the function set when it doesn't set. If you do qtip.set('content.text', 'string') then it actually sets it.

It's a "big deal" because the docimentation example isn't actually working.

 $('img').each(function(){
    $(this).qtip({
        content: {
            text: $('#element')
 }}});

This should return a qtip under each image, but when the image is revisited, it is no longer visible (only the last image sees the element inside the qtip popup). The other images only see the title bar...

There is a problem with the nightly build in IE 8. The screenreader portion of the code (lines 870 - 872) IE complains about it not being able to focus on an object that is invisible and whatnot. Commenting out the code allows it to be usable again, but I don't think that is your desired effect.

In IE 8, there is a problem with line 1160. Here is the existing problem:

if(!self.rendered || !($.browser.msie &amp;&amp; parseInt($.browser.version.charAt(0), 10) < 9)) { return FALSE; }

It throws up an error saying that the function is an invalid property (or something like that. Here is the fix:

if(!self.rendered || !($.browser.msie &amp;&amp; parseInt(String($.browser.version).charAt(0), 10) < 9)) { return FALSE; }

I am getting this error with the latest one. It looks like an undefined check is needed at 1661.

When a tooltip's content.title property was set to false, a .qtip('options','content.title.text') or .qtip('options','content.title.button') query returns the jQuery object the tooltip is related to. This is quite confusing. It would be preferable if 'false' or at least 'undefined' were returned in that case. (The condition »if (tooltip.qtip('options','content.title.button'))« should only return true (or any kind of object), if the tooltip actually has a close button displayed).

An effect function in the show option or in the events show callback seems to permanently hide the tooltip after it's initial show and hide events until the object is re-rendered. Any function seems to do it!

example:
show: {
effect: function(offset) {
$(this).slideDown(100);
}
}

This one came up and was fixed once before. But I just updated to your latest and it's back.

New demo.

Basically when the tooltip gets flipped due to colliding with the bottom of the window it covers up the trigger instead of being above it.

When using Yahoo Profiler as show on http://html5boilerplate.com/ produces the following error: "Uncaught TypeError: Bind must be called on a function"

Test case (take from http://craigsworks.com/projects/qtip2/demos/#navbar): http://www.mediafire.com/?qcqsu9r71af5ad7

Craig, qTips is an amazing product! I just wanted to let you know that the branch you released yesterday (12/08 - dealing with colors) has a minor bug, where if the qTip being created doesn't specify a title, the library generates an error. In the minified version, the problem is being reported on line 77 where it is trying to determine the "length" of the title, but since none is specified, it breaks the code.

Keep up the good work!

I'm building a webshop and I use your great plugin. I found a problem which did not exist in qTip1:
See this page:
Link
Note: Needs to be refreshed on first visit (known problem, I have no solution for it yet)

When you scroll down a bit, all the qTips are placed on the position they would be if you hadn't scrolled. I'm using the most recent CSS in Common.css and style.css. You can find it when you search for qTip in these files.

I'm using te latest commit: (290d774)

Sorry for the bad English, i'm not a native English speaker.

The latest version of qtip doesn't work in IE8.
I got error:

jquery.qtip.js
Line: 1660
Error: 'self.mimic' is null or not an object

I'm trying to hide the qtip when the tip itself is clicked.

    elem.qtip({
        hide: {
            event: 'click',
            target: $(this)
        },
    });

I don't think $(this) refers to the qtip, clicking on anything hides the qtip. Is there a way to select the qtip?

Thanks.

The BGIFrame plugin attempts to call qTip.calculate('dimensions') in its adjust() function, but the calculate() function is a private method, so the call causes and error and the popup is not displayed.

The fix is simple, just export the calculate function from the qTip constructor and it's all good.

I am seeing some odd positioning behavior in browsers --

Safari 5.0.2 Mac:
Tooltips that are positioned with my: "left bottom" or my: "right bottom" are positioned a couple hundred pixels too low.

Firefox 3.x Win and Mac:
Many position settings result in the tooltip rendering in the wrong position and then jumping into the correct position.

Test page at http://karmasoup.org/test/qTip-testing.html
Browsers: Firefox 3.6.1, Chrome 6.0.472.62, Safari 5

The tip are set to position { at: 'right center', my: 'left center' } , adjust {screen: true} and {border: 3} for target "trigger 1 test"

To reproduce:

1. Triggering the tooltip at pageload renders correctly.
2. However, scrolling down so that the target is at top of page, the tip repositions to {left top} but shows an artifact from its initial {left center} position
3. Scrolling page back up so that tip repositions to {left center} then shows artifact from {left top} position

Changing line 1862 for context.clearRect() to negative coordinates instead of 0,0 seems to fix this issue, at least for the browsers tested.

context.clearRect(-50,-50,3000,3000);

when i have my tooltips set up like so:
$this.qtip({
content: actionContent,
delay: 50,
show: {
event: 'mouseover'
},
hide: {
when: 'mouseout',
fixed: true
},
style: {
classes: 'ui-tooltip-light',
widget: false,
tip: {
corner: true
}
},
position: {
target:'mouse',
adjust: {
mouse: false,
screen: 'flip'
}
}
});

it throws the error (sometimes) when i hover over the thing to be tipped.

the jQuery code in question is here:
if ( set ) {
style[ name ] = value;
}

name is top, and value is NaNPx.

so it looks like qTip is passing something that isn't a valid number to jQuery.

the jQuery line is 4488-4490. in version 1.4.1

if i take out the target: 'mouse' and put a regular
at: 'right middle',
my: 'left top',

it works fine.

There is a problem with tip rendering in IE7,8 if you look at http://craigsworks.com/projects/qtip2/demos/#tips (btw, the online version doesn't work for me in IE at all, seems this is because of minified CSS) you'll see that "My left center - At it's right center" (btw, it should be "its" rather than "it's") has an extra line (vertical side of the triangle).

This is related to #issue/43 and how isVisible works and is used.

There are several issues here:

1. When the tip is rendered "reposition" is called before "toggle". With the current CSS this actually makes the tip appear (after reposition) then disappear (tooltip.hide() is called before show) and then reappear again.
2. So when "toggle" is called the tip is already positioned according to the specified settings and "isVisible" returns true.
3. For some reason "toggle" doesn't handle the situation when the tip is already shown and its argument state is true (meaning that it's called to show it again).

This condition
// Return if element is already in correct state
if((!visible && !state) || tooltip.is(':animated')) { return self; }
should rather look as
// Return if element is already in correct state
if((visible == state) || tooltip.is(':animated')) { return self; }

But before this the other issues has to be corrected.

I saw the UI Slider demo and though "that is perfect!!" and it solved a user interface issue I was having with an application.
http://craigsworks.com/projects/qtip2/demos/#ui-slider

Now, I noticed an oddity in testing though. If you load that page in FF 3.6.13 and inspect the handle of the slider you'll notice some ODD html being generated by FF 3.6.13.

5

Here is a test case for it. Unfortunately it looks like a bug in Firefox 3.6 (as it's fixed in FF 4.0b8) and I doubt there is much that can be done to workaround the issue.. But because it's adding an A tag it royally messes up CSS stylings as other jQuery UI stylsheets are picked up in FF3.6 that are not picked up in other browsers (tested FF 4.0b8 and chrome)

http://jsfiddle.net/urkle/DLH2A/

Anyways, didn't know if you had any idea of how to workaround the issue (other than adding extra CSS selectors which is what I'm going to be doing )

First: Thank you very much for this amazing piece of software.
Now abount the bug:
When invoking a modal qtip via .qtip('show'), the darkened overlay has only the height the viewport had at the moment the qTip was shown, but should have the whole webpage's/document's height.
If the webpage is longer (higher) than the viewport, you can scroll down and access the area which appeared after scrolling "as usual", since it's not covered by the overlay.
This issue only occurs on vertical scrolling; horizontal scrolling works as expected.
Also, the issue does not appear when showing the qTip by event, e.g. show: {event: 'click'} and invoking $('#myqtip').click().

I'm building a website in with jQuery that needs a newer version of jQuery (1.4.3). I am also using your tooltip plugin and when I tested it in IE, the tip of the tooltip was not appearing.

If i switch to the jQuery version you are using (1.3.2), the tip becomes visible, but some of my other applications will not work.

Please tell me if there is a fix in order to display the tooltip tip also in IE for jQuery 1.4.3.

Thank you,
Andru

There is an obvious discrepancy in the code.

In the toggle method there is a callback called "after" with the following fragment:
// Hide the tooltip using negative offset and reset opacity
else {
tooltip.css({
display: '',
visibility: 'hidden',
width: '',
opacity: '',
left: '',
top: ''
});
}
Obviously it doesn't set negative offset. While the isVisible method expects it does:
function isVisible() {
return tooltip.css('left') !== hideOffset;
}

I'm using qTip2 to do popups for events on a calendar. Doing the tooltips as modal dialogs (to get the overlay effect) works great on FF and Chrome (after fixing some misc. issues), but in IE 8 there are JS errors that cause the overlay to not work, and the modal dialogs to not be closable.

The JS I'm using to run this

jQuery(document).ready(function()
{
   jQuery(".mini .has-events .calendar-events").hide();
   jQuery(".mini .has-events .mc-date").each(function() {
        var t = jQuery(this);
        t.qtip(
        {
            content: {
                text: t.siblings(".calendar-events"),
                title: {
                    text: "Events",
                    button: true
                }
            },
            position: {
                my: 'top center', // ...at the center of the viewport
                at: 'bottom center',
                target: false
            },
            show: {
                event: 'click', // Show it on click...
                solo: true, // ...and hide all other tooltips...
                modal: true // ...and make it modal
            },
            hide: false,
            style: 'ui-tooltip-light ui-tooltip-rounded',
            events: {
                render: function(event, api) {
                    // Grab the overlay element
                    var elem = api.elements.overlay;
                }
            }
        });
    });
});

And my HTML for the target

<td class="day-with-date has-events">
    <a href="#" class="mc-datre trigger" aria-describedby="ui-tooltip-1">27</a>
</td>

And the HTML of the tooltip.

<div id="ui-tooltip-1" class="ui-tooltip qtip ui-helper-reset ui-tooltip-light ui-tooltip-rounded       ui-tooltip-pos-tc" role="alert" aria-live="polite" aria-atomic="false" aria-describedby="ui-tooltip-    1-content" aria-hidden="false" style="left: 861.5px; top: 209px; display: block; opacity: 1; z-    index: 15003; ">
    <div class="ui-tooltip-tip" style="background-color: transparent; border-top-width: 0px;     border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style:     dashed; border-right-style: dashed; border-bottom-style: dashed; border-left-style: dashed;     border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent;     border-left-color: transparent; height: 8px; width: 8px; left: 50%; margin-left: -4px; top: -7px; ">
        <canvas style="background-color: transparent; border-top-width: 0px; border-right-    width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-top-style: dashed; border-    right-style: dashed; border-bottom-style: dashed; border-left-style: dashed; border-top-color:     transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color:     transparent; " height="8" width="8"></canvas>
    </div>
    <div class="ui-tooltip-titlebar">
        <div id="ui-tooltip-1-title" class="ui-tooltip-title" aria-atomic="true">Events</div>
        <a class="ui-state-default ui-tooltip-icon" title="Close tooltip" aria-label="Close tooltip"     role="button">
            <span class="ui-icon ui-icon-close">×</span>
        </a>
    </div>
    <div class="ui-tooltip-content" id="ui-tooltip-1-content" aria-atomic="true">
        <div class="calendar-events" style="display: block; ">

            <div class="mini-event mc_general vevent">
                [CONTENT]
            </div>
        </div>
    </div>
</div>

And here's the errors that IE8 returns:

On clicking the target---

Message: Invalid argument.
Line: 116
Char: 165
Code: 0
URI: /wp-includes/js/jquery/jquery.js?ver=1.4.2

On trying to close the dialog (clicking the X -- clicking outside has no effect)---

Message: 'undefined' is null or not an object
Line: 2562
Char: 4
Code: 0
URI: /wp-content/themes/carlson/js/jquery.qtip.js?    ver=2

Let me know if you need anything else.

the tooltip (on greye background paragraph) shows up at the wrong place the first time. on chromium, firefox, opera.
It is shown at bottom right instead of top right instead. But on my page site, I see it displayed "quite" randomly the first time.

example:
http://paste.pocoo.org/show/298917/

I have noticed that the first time the tooltip is shown, it is displayed at the wrong place on the page.It is only at the second display of the tooltip that this is correct.

here is a screenshot of the problem. http://i51.tinypic.com/muznko.png the tip should at the right of the text in bold.

here is the code: http://solstice.dhiver.pagesperso-orange.fr/data/qtip-test.zip

this happens in almost every browser. firefox, chromium, IE8, opera.

I use a qtip.min.js with only tips compiled with the makefile and qtip.css trimmed down to only include the cluetip style.

If show is defined like that
show:{ } tooltips have problem with displaying correctly
show:{ event:"mouseover" } will fix it

Cheers,
Nils

I don't know if this is a defect with qtip2 or jquery. I get this error when I am in IE8. I don't see an obvious error show up in Chrome or FireFox but I don't know those browsers well enough to say there isn't an error.

But given the code that is bombing in jquery seems to be an else clause for IE I assume there is no error raised in those browsers. Below is the segment from jquery that raises the error. I put a comment in [] to show where the error is. In the unminified jquery 1.4.4 it errors on line 2442 character 4

I tend to think it is a jquery defect but I know they always want a streamlined jsfiddle with no plug-ins and I don't know how to trigger this error without qtip2.

// jQuery.Event is based on DOM3 Events as specified by the ECMAScript Language Binding
// http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.html
jQuery.Event.prototype = {
preventDefault: function() {
this.isDefaultPrevented = returnTrue;

    var e = this.originalEvent;
    if ( !e ) {
        return;
    }

    // if preventDefault exists run it on the original event
    if ( e.preventDefault ) {
        e.preventDefault();

    // otherwise set the returnValue property of the original event to false (IE)
    } else {
        e.returnValue = false;  [Danoman2: This is the line that gives the error]
    }
},

Here is a full screen jsfiddle and the share link. It is just a single div with a RightClick qtip tied to it.

http://jsfiddle.net/danoman7/NFy2W/embedded/result/

http://jsfiddle.net/danoman7/NFy2W/

Just a couple of things I noticed when updating to last nights commit from perhaps a month ago.

All the tips on tooltips now have black borders?

All the position.adjust.screen = 'flip' behaviour has now stopped?

Just thought I should flag....

I have a demo working where I create my own RightClick popup using qtip such that it cancels the browser RightClick popup. You can mouseover or RightClick on all the elements that have numbers in them in the demo.

http://jsfiddle.net/danoman7/guBSn/11/embedded/result/

However when I set corner to false in the demo below, it isn't consistently handling the RightClick.
style: {
classes: 'ui-tooltip-shadow',
tip: {
corner: false
}
},

http://jsfiddle.net/danoman7/guBSn/12/embedded/result/

you have to RightClick a bunch of different times but you will see fairly consistently one of a few things will happen:

 - it works fine
 - both the RightClick qtip and the mouseover qtip show up at the same time
 - the browser RightClick shows up, but it looks like the qtip RightClick is displayed under it because when you left click somewhere else you can see the qtip briefly when the browser popup hides

Note I am doing all my testing in IE8. The right click doesn't pop a qtip at all in Firefox 3.6.13 regardless of which demo. Both demos do block the browser RightClick from showing up though.

I only really care about IE8 but I thought I would mention something is wonky with RightClick qtips in Firefox. At least given how I implemented it.

Thanks,
Dano

I accidentally closed the other issue whilst adding a comment and cannot re-open it.

The Navbar @ http://craigsworks.com/projects/qtip2/demos/#navbar is broken in IE7-8 on Window XP.

More specifically, the drop down menu items cannot be selected. This could be due to "hide: { fixed: true }" not behaving as expected.

When using "widget: true" in the style configuration, the ui-widget-content class is appended to the content container of the tooltip. However, there is no space between the ui-tooltip-content and ui-widget-content classes, causing a jumbled "ui-tooltip-contentui-widget-content". Thus the wrong styles are displayed.

It appears that Safari 4/OSX is rendering the qTip 2.0 corners quite larger than other browsers, almost appearing as if it has an extra border placed on it. I have not tested this in Safari 4/Win, but I would suspect the same behavior. A screen grab of Safari 4 and Firefox 3.5 to illustrate:

To reproduce, here is the configuration and markup that is applied to this tip:

$('#TheLink').qtip({
    content: {
        text: $('div.ThePanel')
    },
    style: {
        tip: {
            corner: "bottom center",
            width: 20,
            height: 10
        },
        classes: "ui-tooltip-theClass"
    },
    position: {
        my: "bottom center",
        at: "top center",
        adjust: {
            y: 5,
            x: -1
        }
    },
    hide: {
        fixed: true,
        solo: true,
        event: "mouseout"
    },
    prerender: false
});

And the CSS:

div.ui-tooltip-theClass .ui-tooltip-wrapper{
    background-color: # 444;
    color: #eee;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border-color: # 444;
}

div.ui-tooltip-theClass {
    min-width: 300px;
    max-width: 300px;
    width: 300px;
}

Note that the "cut off" corner appears to be a separate stacking issue for which I'll open a separate ticket.

Edit: On further review, the "cut off" appearance may be just because of the way the corner is rendering -- with a blunt tip.

My tooltips have recently (well, since shifting to the 2.x series, perhaps) had a habit of moving 1 pixel to the right on the second showing. The first time the position is correct, but the next time it moves ever so slightly to the right; thereafter it stays in the same position.

The behaviour occurs with or without adjust parameters.

I'm using the current github trunk revision in Chrome.

The nav demo from the qtip2 site doesn't seem to hide the tips on load (at least if they are pre-rendered). I haven't dug into it much more than that, but I am using it on a site in development and noticed this using the version pulled from git tonight (I didn't check anything since Fri Dec 24 05:40:57 2010 +0000 which was working).

I wanted to use a switch to have a qTip being modal or not the way
[...] show: { modal: (should_be_modal_flag) ? true : false }
But I realized that the option 'show.modal':false makes the qTip modal as well as 'true' does.
This occurs at the first invoke of a qTip and also when setting 'modal' via 'options' setter later.
It appears a qTip can only be prevented from being modal by not setting 'show.modal' at all.

Setting 'show.modal' to false should make the qTip non-modal.

Hi,

Pardon me with no understanding of how does this happen. If a tip is rendering half way upon show/hide, interruption (losing the focus, say moving away the mouse to deactivate show), its state will be stuck there. Subsequent activation of the tip will see it incomplete, e.g. transparent (due to half faded) or not fully displayed (due to half slided).

Here is my current setup:

qTip:

$(':input:not(button)').qtip({
    content:{
        attr: 'title'
    },
    position:{
        'my': 'left center',
        'at': 'right center'
    },
    show:{
        effect: function(){ $(this).fadeIn(300); }
    },
    hide:{
        effect: function(){ $(this).fadeOut(300); }
    },
    style:{
        classes: 'tooltip',
        tip:{
            corner: true,
            height: 10,
            width: 5
        }
    }
});

CSS:

.tooltip, .record-tooltip{
    margin: 0 auto;
    position: absolute;
}

.tooltip .ui-tooltip-tip,
.record-tooltip .ui-tooltip-tip{
    position: absolute;
    margin: 0 auto;
    overflow: hidden;
    line-height: 0.1px;
    font-size: 1px;
    background: transparent !important;
    border: 0px !important;
    z-index: 10;
}

.tooltip .ui-tooltip-wrapper{
    /* Tip (arrow) follows this */
    border-color: #000;
    /* Background */
    background-color: #000;
    width: 20em;
    border-radius: 0.25em;
    -webkit-border-radius: 0.25em;
    -moz-border-radius: 0.25em;
    -moz-box-shadow: 0 0 0.25em #888;
    -webkit-box-shadow: 0 0 0.25em #888;
}

.tooltip .ui-tooltip-content{
    color: #fff;
    padding: 0.5em 1em;
    text-align: left;
    word-wrap: break-word;
}

From the commit that made show.modal:false working, the setting show:{modal:{blur:false}} (or true) makes the qTip non-modal. Now only "show:{modal:true}" makes a qTip modal and the blur option cannot be set to false.

When creating tool tips inside a DIV that has CSS attribute overflow: auto, the tooltips are not rendered to the position of the DIV scroll bars position.

eg.


<title>TEST</title>
<script src="jquery.js" type="text/javascript"></script>

         <script src="jquery.qtip.js" type="text/javascript"></script>

    <link href="jquery.qtip.css" rel="stylesheet" type="text/css" />

    <script>
    jQuery(document).ready(function() {
        $('.tt').each(function() {
            var element = $(this);

            element.css("cursor", "pointer");

            element.qtip({
                content: element.html(),
                position: {
                        at: "top left",
                        my: "bottom left"
                    },
                    show: {
                        solo: true
                    }
                });
        });
        });
    </script>

     </head>

<body >
    <div style="height: 100px; width:100px; overflow: auto;">
        <div class="tt">
            1
        </div>
        <div class="tt">
            2
        </div>
        <div class="tt">
            3
        </div>
        <div class="tt">
            4
        </div>
        <div class="tt">
            5
        </div>
        <div class="tt">
            6
        </div>
        <div class="tt">
                    7
                </div>
        <div class="tt">
                    8
                </div>
        <div class="tt">
                    9
                </div>
        <div class="tt">
            10
        </div>
    </div>
</body>
</html>

trying to do a make images (or just a make) fails with the following erro:
cp: ./images/*.png: No such file or directory

I'm guessing something didn't get imported from the old Launchpad repo?

I'm trying to use the target's attributes to set the positioning of the tip. So I thought I would do something like this:

function tooltipAt(elem) {
    if (elem.attr('data-tooltip-at')) {
        return elem.attr('data-tooltip-at');
    } else {
        return 'center left';
    }
}

function tooltipMy(elem) {
    if (elem.attr('data-tooltip-my')) {
        return elem.attr('data-tooltip-my');
    } else {
        return 'center right';
    }
}

$('input').addClass('tooltip').attr('data-tooltip', 'add-list-form').attr('data-tooltip-at', 'bottom center').attr('data-tooltip-my', 'top center');

$('.tooltip').qtip({
    position: {
        my: tooltipMy($(this)),
        at: tooltipAt($(this))
    }
});

But this does not work, as elem is undefined. How can I grab the attributes of the target?

Thanks.

Hi there, thanks for the great plugin although it's not working right in Google Chrome - here is the error:

Uncaught TypeError: Cannot read property 'interfaces' of null - f.fn.qtip/wp-content/themes/mythesis_17/custom/scripts/qTip.js:15

c.extend.each - ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js:30
c.fn.c.each - ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js:24
f.fn.qtip - /wp-content/themes/mythesis_17/custom/scripts/qTip.js:15
(anonymous function)resources:171
c.extend.ready - ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js:26
L - ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js:33

It works perfectly in Firefox. Any ideas?

On a qTip with the mimic and screen:adjust settings enabled, the tip will display correctly until the tooltip is adjusted to fit on the screen. After which, the tip's positioning will still be correct, but the tip reverts to the default tip arrow rather than the mimicked style.

Tested with v2.0.0pre Mon Dec 6 20:09:48 2010 +0000

For example:

{
    style: {
        classes: "ui-tooltip-dark",
        tip: {
            corner: "top left",
            mimic: "top center",
            offset: 20
        }
    },
    position: {
        adjust: {
            screen: 'fit'
        },
        my: "top left",
        at: "bottom left",
    }
}

same as the previous bug except it is for text tooltip and only in opera 10.62 linux.

http://i52.tinypic.com/nbx8ie.png
HTMl:
http://paste.pocoo.org/show/265068/

Note: I reposted a new issue as I got no response in the closed one.

Hello,

This is what I'm trying to do:

var $iframe = jQuery('#my-iframe').contents();

$iframe.find('.some-element').qtip();

Nothing happens and no errors are triggered.

While looking in the DOM, I noticed the hidden ui-tooltip-X element is not created anywhere, but .some-element does get the aria-described-by etc. attributes attached.

Any ideas?

// my code
$(document).ready(function() {
$('.mediarepository .item a.name, .mediarepository .item a.image').each(function() {
$(this).qtip({
content: {
text: $('#details_item_' + $(this).attr('rel') + ' .details_content')
},
hide: {
fixed: true
},
show: {
delay: 0
},
position: {
target: 'mouse',
adjust: {
mouse: false,
screen: true,
resize: false
}
},
style: {
classes: 'media_details'
},
events: {
render: function(event, api) {
$('.size a, h3 a', $(this)).each(function() {
$(this).qtip({
content: {
text: 'test'
},
position: {
target: 'mouse',
adjust: {
mouse: true,
screen: true,
resize: false
}
},
show: {
delay: 0
}
});
});
}
}
});
});
});

i tracked it down to lines 46-49 in the dists/jquery.qtip.js:
var noContent = opts.content.text || FALSE;
if(noContent.length < 1 || (!noContent && !noContent.attr) || !noContent.jquery) {
opts.content.text = FALSE;
}

commenting out the line inside the 'if' solves my immediate problem of not rendering my tips inside tips.

With qTip shown on click it will navigate to the url when you click the link to show the tip. I had managed to fix this by adding return 'false' to the end of the event handler in qTip V1, not sure where to do it in the latest version.