title: JQuery UI: remove Bootstrap tooltip on a draggable clone when drag starts?
body: <p>I am using JQuery UI for drag and drop in my project.</p>
  
  <p>On the draggable element, I have Bootstrap (3.x) tooltip. </p>
  
  <p>Moving the mouse over the draggable shows the tooltip. </p>
  
  <p>I hope to remove/hide tooltip on the draggable clone when drag starts. I goolged and tested, but to no success. </p>
  
  <p>Here is jsfiddle setup of the whole thing. Link: <a href="http://jsfiddle.net/mddc/6md9h/18/" rel="nofollow">http://jsfiddle.net/mddc/6md9h/18/</a></p>
  
  <pre><code>&lt;div id="draggable" class="ui-widget-content"&gt;
    &lt;div data-toggle="tooltip" data-original-title="Tooltip to disappear when drag starts."&gt;Drag me&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="droppable" class="ui-widget-header"&gt;
    &lt;p&gt;Drop here&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is javascript code:</p>
  
  <pre><code> $(function() {
       $( "#draggable" ).draggable({
           start: function(event, ui) {
               //this is what I hope to work, but not working!
               $(ui.helper).find('[data-toggle="tooltip"]').tooltip('hide');
           }, 
          helper: 'clone',
          revert: "invalid"
       });
  
      $( "#droppable" ).droppable({
        drop: function( event, ui ) {
          $( this )
            .addClass( "ui-state-highlight" )
            .find( "p" )
              .html( "Dropped!" );
        }
      });
  
      $('[data-toggle="tooltip"]').tooltip({
          'animation': true,
          'placement': 'bottom' 
      });     
    });
  </code></pre>
  
  <p>Thanks for any help! </p>