qTip, draggable

Question

I'm trying to get the qtip example here:

http://craigsworks.com/projects/qtip/demos/position/fixed

such that when the image of the owl is moved, the qtip moves with it (and stays in the top right corner).

Thanks!

Bonus Question .. I am also trying to have a hover border appear around the owl as well on mouse over.

Here's the code for implementing this style of qtip:

<script type="text/javascript">
// Only create tooltips when document is ready
$(document).ready(function()
{
   // Use the each() method to gain access to each of the elements attributes
   $('#content img').each(function()
   {
      $(this).qtip(
      {
         content: '<a href="#">Edit</a> | <a href="#">Delete</a>', // Give it some content
         position: 'topRight', // Set its position
         hide: {
            fixed: true // Make it fixed so it can be hovered over
         },
         style: {
            padding: '5px 15px', // Give it some extra padding
            name: 'dark' // And style it with the preset dark theme
         }
      });
   });
});
</script>

I don't know why the documentation isn't screaming an answer at me!

Answer 1

Here is an example where the qtip popup is draggable.

http://jsfiddle.net/cagura/VunSW/