JQuery UI: remove Bootstrap tooltip on a draggable clone when drag starts?

问题

I am using JQuery UI for drag and drop in my project.

On the draggable element, I have Bootstrap (3.x) tooltip.

Moving the mouse over the draggable shows the tooltip.

I hope to remove/hide tooltip on the draggable clone when drag starts. I goolged and tested, but to no success.

Here is jsfiddle setup of the whole thing. Link: http://jsfiddle.net/mddc/6md9h/18/

<div id="draggable" class="ui-widget-content">
  <div data-toggle="tooltip" data-original-title="Tooltip to disappear when drag starts.">Drag me</div>
</div>

<div id="droppable" class="ui-widget-header">
  <p>Drop here</p>
</div>

Here is javascript 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' 
    });     
  });

Thanks for any help!

回答1:

You can hide you tooltip child element.

Code:

 $( "#draggable" ).draggable({
     start: function(event, ui) {             
         $(ui.helper).find('.tooltip').hide();             
     }, 
    helper: 'clone',
    revert: "invalid"
 });

Demo: http://jsfiddle.net/9RwHh/

回答2:

Why not just use

start: function(ev, ui){
$('.tooltip').remove();
}

At one point there will be only one element with "tooltip" class available in the document. So it should be a safe bet to just remove it.

来源：https://stackoverflow.com/questions/22774519/jquery-ui-remove-bootstrap-tooltip-on-a-draggable-clone-when-drag-starts