JQuery UI:拖动开始时删除可拖动克隆上的Bootstrap工具提示?

时间:2014-04-01 00:09:11

标签: jquery-ui twitter-bootstrap jquery-ui-draggable

我正在使用JQuery UI拖放项目。

在可拖动元素上,我有Bootstrap(3.x)工具提示。

将鼠标移到draggable上会显示工具提示。

我希望在拖动开始时删除/隐藏可拖动克隆上的工具提示。我进行了测试和测试,但没有成功。

这是整个事情的jsfiddle设置。链接: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>

这是javascript代码:

 $(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' 
    });     
  });

感谢您的帮助!

2 个答案:

答案 0 :(得分:6)

您可以隐藏tooltip子元素。

代码:

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

演示:http://jsfiddle.net/9RwHh/

答案 1 :(得分:0)

为什么不使用

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

在某一点上,只有一个元素带有&#34;工具提示&#34;文档中提供的类。因此,删除它应该是一个安全的选择。