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

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 fiddle 示例 fiddle

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>