在可排序插件中拖动一行时如何删除工具提示？答案

【问题标题】：How to remove the tooltip when dragging a row in sortable plugin?在可排序插件中拖动一行时如何删除工具提示？
【发布时间】：2017-01-28 15:36:48
【问题描述】：

我想在拖动可排序结构的任何行时删除工具提示，因为存在故障问题，因为工具提示在行上方或下方移动会产生奇怪的效果。所以我想避免它在拖动动作开始时删除工具提示。

我正在使用 jquery ui 官方页面的可排序示例。

有人知道解决方法吗？

提前谢谢你问候

已编辑：插入的代码示例：

    <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Sortable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
  #sortable li span { position: absolute; margin-left: -1.3em; }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script>
  $( function() {
$("[data-toggle=tooltip]").tooltip();
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
  } );
  </script>
</head>
<body>

<ul id="sortable" style="padding:30px">
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><label data-toggle="tooltip" data-html="true" title="<h2>Item1</h2>">Item 1</label></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><label data-toggle="tooltip" data-html="true" title="<h2>Item2</h2>">Item 2</label></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><label data-toggle="tooltip" data-html="true" title="<h2>Item3</h2>">Item 3</label></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><label data-toggle="tooltip" data-html="true" title="<h2>Item4</h2>">Item 4</label></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><label data-toggle="tooltip" data-html="true" title="<h2>Item5</h2>">Item 5</label></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><label data-toggle="tooltip" data-html="true" title="<h2>Item6</h2>">Item 6</label></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><label data-toggle="tooltip" data-html="true" title="<h2>Item7</h2>">Item 7</label></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><label data-toggle="tooltip" data-html="true" title="<h2>Item8</h2>">Item 8</label></li>
  <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><label data-toggle="tooltip" data-html="true" title="<h2>Item9</h2>">Item 9</label></li>
</ul>


</body>
</html>

【问题讨论】：

你能提供一个实际的例子吗？
已插入代码示例

标签： jquery user-interface tooltip jquery-ui-sortable

【解决方案1】：

您对此有多种可能的解决方案。当您start 对列表进行排序时，一个是hiding 引导工具提示：

$("#sortable").sortable({
  start: function() {
     $("[data-toggle=tooltip]").tooltip('hide');
  }
});

Example

【讨论】：

它似乎有效，但如果我尝试在浏览器中查看结果，我看不到每行开头的箭头粗图像和每行的矩形形状。有什么帮助吗？
@Levimatt 要使ui-icon 工作，您还必须包含 jquery-ui css。
感谢大家的支持。 “开始”属性可以解决问题，隐藏行中包含的工具提示属性。