Jquery draggable show qtip while being dragged

Question

I want to show tootip on an element when it is being dragged and hide it when the element is dropped/reverted.
I am using qtip2 for the tooltip

My Code:

$(".noDrop").qtip({
     content: "You cannot drop this item",
     show: "mousedown",
     position: {
         target: 'mouse',
         viewport: $(window) // Keep it on-screen at all times if possible
     },
     hide: {
         fixed: true, // Helps to prevent the tooltip from hiding ocassionally when tracking!
         event: 'mouseup'
     }
 });

Here is the fiddle: http://jsfiddle.net/e6dJq/

I can see the tooltip when the element is clicked, but it is hidden as soon as the dragging starts. Because a clone is created and the element loses focus.
I am not able to keep the tooltip visible until the mouse click is released. Please help.

Answer 1

Try it like this:

$( ".noDrop" ).on( "dragstart", function( event, ui ) {

  $(".ui-draggable-dragging").qtip(
      content: "You cannot drop this item",
      position: {
          target: 'mouse',
          viewport: $(window) // Keep it on-screen at all times if possible
      },
      hide: {
          fixed: true, // Helps to prevent the tooltip from hiding ocassionally when tracking!
          event: 'mouseup'
      }
  }).qtip("show");
 });

It will call qtip on cloned element.

http://jsfiddle.net/e6dJq/2/