<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1.0.6/webfont.js"></script>
<script type="text/javascript">
//<![CDATA[
     WebFont.load({
          typekit: { id: '[my TypeKit ID]' }
     });
//]]>   
</script>
<script type="text/javascript" src="/js/jquery.qtip-1.0.0-rc3.min.js"></script>
<script type="text/javascript">
//<![CDATA[
    $(document).ready(function () 
    {
        $.fn.qtip.styles.win = {
            width: 400,
            padding: 10,
            border:
            {
                width: 5,
                radius: 0,
                color: '#c5e9ff'
            },
            tip:
            {
                size:
                {
                    x: 10,
                    y: 10
                }
            },
            name: 'light'
        }
        $(".tip-right-event").each(function () 
        {
            $(this).qtip(
            {
                content:
                {
                    url: 'tooltip_event.aspx',
                    data: { id: $(this).attr('title') },
                    method: 'post'
                },
                position:
                {
                    corner:
                    {
                        target: 'rightMiddle',
                        tooltip: 'leftMiddle'
                    }
                },
                style:
                {
                    tip: 'leftMiddle',
                    name: 'win'
                }
            })
        })
        $(".tip-left-event").each(function () 
        {
            $(this).qtip(
            {
                content:
                {
                    url: 'tooltip_event.aspx',
                    data: { id: $(this).attr('title') },
                    method: 'post'
                },
                position:
                {
                    corner:
                    {
                        target: 'leftMiddle',
                        tooltip: 'rightMiddle'
                    }
                },
                style:
                {
                    tip: 'rightMiddle',
                    name: 'win'
                }
            })
        })
        $(".tip-right-nextstep").each(function () 
        {
            $(this).qtip(
            {
                content:
                {
                    url: 'tooltip_nextstep.aspx',
                    data: { id: $(this).attr('title') },
                    method: 'post'
                },
                position:
                {
                    corner:
                    {
                        target: 'rightMiddle',
                        tooltip: 'leftMiddle'
                    }
                },
                style:
                {
                    tip: 'leftMiddle',
                    name: 'win'
                }
            })
        })
    });
//]]>   
</script>

<ul id="c-title">
   <li class="c-01">Test1</li>
   <li class="c-02">Test2</li>
   <li class="c-03">Test3</li>
</ul>

<script type="text/javascript">
$(document).ready(function() 
{
   $('#c-title li.c-01').qtip({
      content: '<a href="http://google.com"><img src="images/campaigns/c-01.gif" alt="" /></a>',
     position: {
         corner: { target: 'rightMiddle', tooltip: 'leftMiddle'}
     },
     show: { when: { event: 'click' } },
     hide: { when: { event: 'unfocus' } },
      style: {
         padding: 0,
      border: 0,
         background: 'transparent',
         textAlign: 'left'
     }
   });
});
</script>

style: {classes: 'ui-tooltip-red',tip: {<span style="font-weight: bold;">corner: true</span>,border: 3,width: 16,height: 24}},
 
I want to change the corner to be in the left bottom of the tip. I tried this and the qTip has now moved close to the top corner of the page. Any ideas what could be going on?
 
[code=javascript]style: {classes: 'ui-tooltip-red',tip: {<span style="font-weight: bold;">corner: 'bottom left'</span>,border: 3,width: 16,height: 24}}

$(field).qtip({
                        content: app['validateMessages'][m],
                        style: {classes: 'ui-tooltip-red',tip: {
                              corner: 'bottom left',
                              border: 3,
                              width: 16,
                              height: 24
                           }
                      },
                        position: { my: 'left bottom', at: 'top right'},
                        show: {ready: true,event: 'resize'},
                        hide: 'blur'
                  });

$('.tip').each(function () {
   $(this).qtip({
      content: {
         text: $(this).next('.product_info').html();
      }
   });
});

$('a.tip').each(function(){
      //e.preventDefault();
      var pid = $(this).attr('id');
      $(this).qtip(
      {
         content: {
            // Set the text to an image HTML string with the correct src URL to the loading image you want to use
            text: '<img class="throbber" src="new_img/working.gif" alt="Loading..." />',
            url: 'ajax/tooltip.php', // Use the rel attribute of each element for the url to load
            data: { id: pid },
            title: {
               text: 'Produkt - ' + pid, // Give the tooltip a title using each elements text
               button: 'St&auml;ng ruta' // Show a close link in the title
            }
         },
         position: {
            corner: {
               target: 'rightMiddle', // Position the tooltip above the link
               tooltip: 'leftMiddle'
            },
            adjust: {
               screen: true // Keep the tooltip on-screen at all times
            }
         },
         show: { 
            when: 'mouseover', 
            solo: true // Only show one tooltip at a time
         },
         hide: 'unfocus',
         style: {
            tip: true, // Apply a speech bubble tip to the tooltip at the designated tooltip corner
            border: {
               width: 0,
               radius: 4
            },
            name: 'light', // Use the default light style
            width: 450 // Set the tooltip width
         }
      })

<div id="apple" class="test"><a href="#" title="The Big Apple">New York</a></div>
 
<script class="test" type="text/javascript"> 
// Create the tooltips only on document load
$(document).ready(function() 
{
   // By suppling no content attribute, the library uses each elements title attribute by default
   $('#apple a[href][title]').qtip({
      content: {
         text: false // Use each elements title attribute
      },
      style: 'cream' // Give it some style
   });
   
   // NOTE: You can even omit all options and simply replace the regular title tooltips like so:
   // $('#content a[href]').qtip();
});
</script>