How can i make my qtip decide on his own to Left or Right tip attribute

Question

$('a.tooltip').each(function(){
    
    $(this).qtip({
        content: { url: 'includes/qtip.php?'+$(this).attr('rel')+' #'+$(this).attr('div'), text:'loading...'  },
        show: { delay: 400},
        hide: { fixed: true, delay: 200 },
        position: {
            corner: {
                target: 'bottomLeft',
                tooltip: 'right'
            }
         },
         style: {
             name: 'light',
             width: 700
         }
    });
});

Which I love wen the .tooltip item is on the right panel of my website, but if not can't see it complete,

How can I make it tooltip:'right' when it's somewhere else? I mean, how can I know?

Answer 1

The solution in my similar to yours case was:

position : {
    adjust : {
        screen : true
    }
}

You may find more info in this thread: How to avoid page scroll when using qtip?

Answer 2

I think might be first time i answer my own question,

this works,

$('#panel_derecho a.tooltip').each(function(){

  $(this).qtip({
     content: { url: 'includes/qtip.php?'+$(this).attr('rel')+' #'+$(this).attr('div'), text:'loading...'  },

     show: { delay: 400},
     hide: { fixed: true, delay: 200 },

     position: {
     corner: {
        target: 'topLeft',
        tooltip: 'middleRight'
                }
                },
     style: {
       name: 'light',
       width: 700



       }




   });

});

$('#router a.tooltip').each(function(){

  $(this).qtip({
     content: { url: 'includes/qtip.php?'+$(this).attr('rel')+' #'+$(this).attr('div'), text:'loading...'  },

     show: { delay: 400},
     hide: { fixed: true, delay: 200 },

     position: {
     corner: {
        target: 'topLeft',
        tooltip: 'left'
                }
                },
     style: {
       name: 'light',
       width: 700



       }




   });

});

can i optimize it?