在其外部单击时关闭工具提示

Question

我试图让我的工具提示通知文本能够在 150x150 框外的任何地方单击时关闭，因为现在我只能在再次单击该框时关闭工具提示。

到目前为止，这是我的代码。有任何想法吗 ？

@Junaid 的这个回答对我没有帮助，因为当我用我的代码实现它时，我的工具提示不会在点击时显示。我可以收到我的问题的准确答案吗？

 var hasToolTip = $(".inner");

hasToolTip.on("click", function(e) {
  e.preventDefault();
  var isShowing = $(this).data("isShowing");
  hasToolTip.removeData("isShowing");
  if (isShowing != "true") {
    hasToolTip.not(this).tooltip("hide");
    $(this).data("isShowing", "true");
    $(this).tooltip("show");
  } else {
    $(this).tooltip("hide");
  }
}).tooltip({
  animation: true,
  trigger: "manual",
  placement: "auto"
});

 .container { width: 960px; margin: 0 auto; }
.outer { width: 150px; height: 150px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="outer">
    <div class="inner" data-toggle="tooltip" data-placement="bottom" data-original-title="Tooltip text" aria-describedby="tooltip">
      <img src="http://via.placeholder.com/150x150">
    </div>
  </div>
</div>

Js 小提琴示例 小提琴

原文由 Peter Solvien 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

查看下面的示例（删除了隐藏/显示 onClick 以简化示例）。这显示了如何处理 mouseout 方法以删除弹出窗口，同时在事件发生后自行清理。

 var $hasToolTip = $(".inner");

$hasToolTip.tooltip({
  animation: true,
  trigger: "manual",
  placement: "auto"
});

$hasToolTip.on("click", function(e) {
  var $this = $(this);
  e.preventDefault();

  // create event handler as we need to remove event when done
  function onWindowClick() {
    $this.tooltip("hide");
    // remove the event
    $('.fakebox').off('mouseout', onWindowClick);
    $('.fakebox').css({display:'none'});
  }

  // add the event
  $('.fakebox').on('click', onWindowClick);
  $('.fakebox').css({display:'block'});
  $(this).tooltip("show");
})

 .container { width: 960px; margin: 0 auto; }
.outer { width: 150px; height: 150px; }
.fakebox {display:none; width:100%; height: 100%; position:fixed;}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="fakebox"></div>
<div class="container">
  <div class="outer">
    <div class="inner" tab-index="0" data-toggle="tooltip" data-placement="bottom" data-original-title="Tooltip text" aria-describedby="tooltip">
      <img src="http://via.placeholder.com/150x150">
    </div>
  </div>
</div>

原文由 Muhammad Dadu 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这是我的建议。 （ 工作 JsFiddle ）

• 单击时使用 tooltip(‘toggle’) 切换工具提示的显示和隐藏，这消除了手动跟踪活动工具提示元素的开销。
• 要关闭点击外部任何地方的工具提示，请将点击事件附加到您的 body 并且当有点击时检查它是否在具有类 .inner 的 div 元素上— 如果是这样，那么我们必须隐藏除此之外的所有工具提示，否则隐藏所有。

下面是工作示例。我添加了更多的 div 元素，以便您可以测试所有可能的情况。

 var hasToolTip = $(".inner");

hasToolTip.on("click", function(e) {
  e.preventDefault();
  $(this).tooltip('toggle');
}).tooltip({
  animation: true,
  trigger: "manual",
  placement: "auto"
});

$('body').on('click', function(e) {
  var $parent = $(e.target).closest('.inner');
  if ($parent.length) {
   hasToolTip.not($parent).tooltip('hide');
  }
  else{
    hasToolTip.tooltip('hide');
  }
});

 .container {
  width: 960px;
  margin: 0 auto;
}
html,body{
  height:100%;
  width:100%;
}

.outer {
  width: 150px;
  height: 150px;
  border: 1px solid black;
  margin:5px;
  float:left;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="outer">
    <div class="inner" data-toggle="tooltip" data-placement="bottom" data-original-title="Tooltip text" aria-describedby="tooltip">
      <img src="http://via.placeholder.com/150x150">
    </div>
  </div>
  <div class="outer">
    <div class="inner" data-toggle="tooltip" data-placement="bottom" data-original-title="Tooltip text" aria-describedby="tooltip">
      <img src="http://via.placeholder.com/150x150">
    </div>
  </div>
  <div class="outer">
    <div class="inner" data-toggle="tooltip" data-placement="bottom" data-original-title="Tooltip text" aria-describedby="tooltip">
      <img src="http://via.placeholder.com/150x150">
    </div>
  </div>
</div>

原文由 Rajshekar Reddy 发布，翻译遵循 CC BY-SA 4.0 许可协议