Tooltip with Sortable gives unexpected result

user_7189154 0
Viewed 229

I'm working with bootstrap jquery and Sortable. I'm trying to do a drag from a box to another one with a clone from the first one. The problem is that I have a tooltip and after my drag the tooltip does something weird.

try to drag here a to the second list then hover your mouse on a and you will see the problem

$('[data-toggle="tooltip"]').tooltip();
Sortable.create(foo, {
  group: {
    name : 'foo',
    pull : 'clone',
  }
});

Sortable.create(bar, {
  group: 'foo',
});
ul {
  list-style: none;
  padding: 0;
  border : 1px solid blue;
  min-height : 20px;
}

li {
  background: #eee;
  margin: 1px;
  padding: 5px 10px;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Sortable: `put: []` demo</title>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

  <!-- Sortable.js -->
  <script src="https://raw.githack.com/SortableJS/Sortable/master/Sortable.js"></script>

  
</head>
<body>
  <br>
  <ul id="foo">
    <li>here <span data-toggle="tooltip" data-placement="right" title="test">a</span></li>
  </ul>

  <ul id="bar">
  </ul>


  
</body>
</html>

javascript
1 Answers

The problem is Sortable doesn't create a new element but clone the first one. So what you can do is remove the cloned element with the tooltip and create a new one. You can use the onClone proprety of Sortable and use the evt.clone That should resolve the problem 

$('[data-toggle="tooltip"]').tooltip();
Sortable.create(foo, {
  group: {
    name : 'foo',
    pull : 'clone'
    },
    onClone : function(evt) {
      var title = $(evt.clone).find('[data-toggle="tooltip"]').data('original-title')
      $(evt.clone).find('[data-toggle="tooltip"]').remove()
      $(evt.clone).append('<span data-toggle="tooltip" data-placement="right" title="'+title+'">a</span>')
      $(evt.clone).find('[data-toggle="tooltip"]').tooltip()

    }
});
Sortable.create(bar, {
  group: 'foo',
});
user_45477010
Related