manual positioning adjust on qtip tooltip (not working)

Question

 $('#nav a[href][title]').qtip({
      content: {
         text: false // Use each elements title attribute
      },
      position: {
     corner: {
        target: 'topLeft',
        tooltip: 'middleRight'
                }
                },
     style: {
       name: 'dark',
       width: 230,
       padding: 3,
       bottom: 10,
       textAlign: 'center'
      }
 // Give it some style
   });

i would like to simulate: css: position:relative;bottom:10px so the tooltip gets vertical aligned (see image) with target, but i cant get it done

trying like this

$('#nav a[href][title]').qtip({
      content: {
         text: false // Use each elements title attribute
      },
      position: {
     corner: {
        target: 'topLeft',
        tooltip: 'middleRight'
                }
                },
     style: {
       name: 'dark',
       width: 230,
       padding: 3,
       position: 'relative',
       bottom: 10,
       textAlign: 'center'
      }
 // Give it some style
   });

But the text of the tooltip gets moved, not the tooltip itself,

how can i do this?

EDIT

trying the 'adjust' property but there is a syntax mistake i can't find

$('#nav a[href][title]').qtip({
      content: {
         text: false // Use each elements title attribute
      },
      position: {

      adjust: {
              x: 10px,
              y: 10px
       },

     corner: {
               target: 'topLeft',
               tooltip: 'middleRight'
                }
     },
     style: {
       name: 'dark',
       width: 230,
       padding: 3,
       textAlign: 'center'
      },
 // Give it some style
   });

Shroff

Answer 1

You can use "adjust" property of the "position" property group as follows:

position: {
    corner: {
        target: 'topLeft',
        tooltip: 'middleRight'
        },
    adjust: {
        x: 10,
        y: 10
        }
    }

The numbers i provided are arbitrary. You can play with them to position as you want.

Aztec

thanks for your reply, about to edit my question because Netbeans jumps syntax error (and of corse qtip doesn't get enabled), how shall I place it? thank you again! – Shroff

using-> adjust: { x: '10px', y: '10px' } removes the error, but it doesn't seem to make any effect – Shroff

are you using qtip or qtip2? They have released qtip2 and the old one will soon be obsolete. no rewrite is needed, just download qtip2 js file and replace your old one with it. As far as the adjust, my bad, you don't need px, just use plain numbers without quotes. – Aztec

ok, that was it. My solution: adjust: { y: -10 } – Shroff

If you are still using jquery.qtip-1.0.0-rc3.js along with jQuery 1.8.2 or less, you may need to update the the qtip library to call the .outerHeight and .outerWidth calls to include the boolean argument to get the correct position and dimensions. To be exact, just replace the following method calls: .outerHeight() and .outerWideth() with .outerHeight(true) and .outerWidth(true) The boolean indicates to either include/exclude the margins, which in versions 1.8.2 or less seems to return the actual value versus just calling the.outerHeight and outerWidth which returns the jQuery object. – Turbary