Craga89/qTip2 — Issue #291: width not correct when placed inside parent in IE
Author: katowulf
Created: 2011-12-29 18:41:40+00:00
State: open

I have a qTip element that is positioned inside a parent element. Whether the parent is relative or absolutely positioned, the qTip is assigned a width that overflows the boundaries in IE, but not FF.

Here is a screenshot in FF: http://ScrnSht.com/koizle
Here is a screenshot of the same page in IE: http://ScrnSht.com/ozgvbh

Note how the qTip is clipped at the right.

Here is a sample CSS style to reproduce the parent div:
```css
#slider {
width: 24%;
position: relative;
overflow: hidden;
border: 1px solid #ddd;
height: 800px;
}
```

Here is the qTip code:
```javascript
$(document.body).qtip({
id: 'node', // Give it an ID of ui-tooltip-step so we an identify it easily
content: {
text: 'position: 0 aaaaaaaaaaaaaa aaaaaa aaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaa'
},
position: {
my: 'left top',
at: 'left top',
target: $('#slider'),
container: $('#slider'),
adjust: {
x: 14, //twenty minus tip length (6px)
y: 155,
method: 'none'
}
},
show: {
event: false, // Only show when show() is called manually
ready: true // Also show on page load
},
style: {
classes: 'ui-tooltip-light ui-tooltip-shadow ui-tooltip-rounded'
},
prerender: true,
hide: false, // Don't' hide unless we call hide()
});
```

I'm using nightly build from Dec 17, 2011; tested with jQuery versions 1.5.1, 1.7, and 1.4.4

IE 8.0.6001.18702