Edit in JSFiddle

$(document).ready(function()
{
    
   $('#trigger1').qtip(
   {
       position: {
           my: 'top left',
           at: 'top left',
           target: $('#test'),
           adjust: {
               x: 400,
               y: 400
           }
       }
   });
    
});

$(document).ready(function()
{
    
   $('#trigger2').qtip(
   {
       position: {
           my: 'top left',
           at: 'top left',
           target: $('#test'),
           adjust: {
               x: 400,
               y: 400
           }
       }
   });
    
});

$(document).ready(function()
{
    
   $('#trigger3').qtip(
   {
       position: {
           my: 'top left',
           at: 'top left',
           target: $('#test'),
           adjust: {
               x: 400,
               y: 400
           }
       }
   });
    
});

<div id="test">

<div id="demo-modal">
    <p><a id="trigger1" href="#" title="Tooltip">Trigger</a></p>
</div>

<div id="demo-modal">
    <p><a id="trigger2" href="#" title="Tooltip">Trigger</a></p>
</div>

<div id="demo-modal">
    <p><a id="trigger3" href="#" title="Tooltip">Trigger</a></p>
</div>
</div>

#test {
    width: 400px;
    height: 400px;
    border: solid medium blue;
    
}
#trigger1 {
    padding: 50px;
    border: solid medium black;
    float: left;
}
#trigger2 {
    padding: 110px;
        border: solid medium red;
    float: left;
}
#trigger3 {
    padding: 220px;
        border: solid medium yellow;
    float: left;
}    margin: 0px 0px 20px 0px;