[Solved] Tooltip needs to appear on the right

[johntgiles]

I have a graphic image on where I am using area mapping for each tool tip. The image is displayed in an IFrame on Facebook. A couple of the area maps are on the right hand side. The tips apear to run off the page so the rest of the text disappears. How do you pull the tip to the right so it will stay in the IFrame?

[Craig]

Try:

JS Code

position: {
   adjust: { screen: true }
}

[johntgiles]

Craig, thank you for the fast reply. It is not working for me. I'm sure it is something stupid I'm doing:

If you want to see it in action: http://www.facebook.com/#!/pages/Test-pa...7717093884

Click on the flag to see what I'm talking about.


$.fn.qtip.styles.rightstyle = { // Last part is the name of the style
width: 300,
'font-size': 12,
padding: 3,
background: '#A2D959',
color: 'black',
textAlign: 'left',
border: {
width: 2,
radius: 5,
color: '#ffffff'
},
postion: {

adjust: {
screen: true
}
},
tip: {
corner: 'topLeft',
size: {
x: 3,
y: 3
}},
name: 'dark' // Inherit the rest of the attributes from the preset dark style
}

// Create the tooltips only when document ready
$(document).ready(function()
{
// Use the each() method to gain access to each elements attributes
$('area').each(function(index)
{

if (index < 2) {
$(this).qtip(
{
content: $(this).attr('rel'),
style: 'leftstyle'
});
}
if ((index >= 2) && (index < 7)) {
$(this).qtip(
{
content: $(this).attr('rel'), // Use the ALT attribute of the area map
style: 'midstyle' // The name of the newly created custom style above
});
}
if (index >= 7) {
$(this).qtip(
{
content: $(this).attr('rel'), // Use the ALT attribute of the area map
style: 'rightstyle' // The name of the newly created custom style above
});
}
});
});</script>

[johntgiles]

This made no difference either:

postion: {

adjust: {
x: -100,
y: -100
}
}

[johntgiles]

I moved to qtip 2.0 this morning and went with the basics. What would I need to add to force it to stay withing the Facebook IFrame?


<script language="javascript" type="text/javascript">
// Create the tooltips only when document ready
$(document).ready(function()
{
// Use the each() method to gain access to each elements attributes
$('area').each(function(index)
{
$(this).qtip({
content: {
attr: 'rel'
}
})
});
});
</script>

---

Craig, Please disregard. I have it working now. if required: position: {viewport: $(window)}

I had a mistake in my CSS as well. I changed the height:100% to height:500px

All is well!!

Thanks for your wonderful tool !