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

Answer 1

这是我的建议。（ Working 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>

Answer 2

请看下面的示例（删除了hide / show onClick以简化示例）。这显示了如何处理mouseout方法以删除popover，同时在事后自行清理事件。

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>

Answer 3

如果您需要自动隐藏Bootstrap工具提示（或弹出窗口）之类的行为，或者在外部单击任何地方，请使用和样式化可以聚焦的元素。例如按钮。

在模板中使用代码：

<button class="tooltip-button"
        role="button"
        data-toggle="tooltip"
        data-placement="right"
        data-html="true"
        data-trigger="focus"
        data-title="Your tooltip html code or text">*</button>

带有SCSS的样式，以将按钮作为常规文本引入

button.tooltip-button {
  cursor: pointer;
  border: none;
  background-color: transparent;
  padding: 0;
  &:not(:disabled) {
    outline: none;
  }
}

别忘了在基本模板中初始化页面上的所有工具提示：

<script>
    $(function () {
        $('[data-toggle="tooltip"]').tooltip();
    })
</script>

Answer 4

您可以通过这种方式来实现。我在包含图像的div中添加了一个额外的ID。

<script>
        $(document).ready(function(){
            $("#ImageTooltip").tooltip({
              delay: {show: 0, hide: 300},
              trigger :'manual'
            }); 
        
            $('#ImageTooltip').on('click', function (e) {
              $('#ImageTooltip').tooltip('show');
        
            });
        
            $(document).mouseup(function (e) { 
              if ($(e.target).closest(".tooltip-inner").length === 0) { 
                      $('#ImageTooltip').tooltip('hide');
                  } 
            }); 
        
        });
    </script>



    .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" id="ImageTooltip" data-toggle="tooltip" data-placement="bottom" data-original-title="Tooltip text" aria-describedby="tooltip">
              <img src="http://via.placeholder.com/150x150">
            </div>
          </div>
        </div>

在其外部点击关闭工具提示

4 个答案: