Jquery tooltip plugin qTip doesn't seem to set width properly

Question

i have an asp.net mvc site and here is a dynamic tooltip using qTip

Here is my code:

$('a.showNutritionInfo').each(function() {

    $(this).qtip({
        content: {
        text: '<img src="../../images/ajax-loader1.gif" alt="" />',
        style: { width: 450 },
        url: '/Tracker/NutritionInfo/' + $(this).attr('id'),
        method: 'get'
        }
    });
});

this works perfectly EXCEPT the width attribute listed above is ignored. No matter what i put in that width attribute, i get the same size width tooltip which is about half of the width that i need. the height is perfectly fine.

any ideas? is this a bug in the product ?

Answer 1

You need to put the style declaration outside the content declaration as those are two different properties:

$(this).qtip({
    content: {
        text: '<img src="../../images/ajax-loader1.gif" alt="" />',
        url: '/Tracker/NutritionInfo/' + $(this).attr('id'),
        method: 'get'
    },
    style: { width: 450 }
});