自动隐藏Bootstrap工具提示

Question

我希望能够在几秒钟后自动隐藏Bootstrap提示框。

 <input type="text" title="" data-placement="bottom" style="width:200px" data-toggle="tooltip" autocomplete="off" data-provide="typeahead" class="form-control Waring" name="medicine_name" id="medicine_name" data-original-title="Please Enter Valid medicine name">

- Dhanil

Answer 1

我在所有Bootstrap工具提示上使用此功能实现页面宽度的自动隐藏：

$(function () {
   $(document).on('shown.bs.tooltip', function (e) {
      setTimeout(function () {
        $(e.target).tooltip('hide');
      }, 10000);
   });
});

- Lars Holm Jensen

Answer 2

试试这个

$('#element').on('shown.bs.tooltip', function () {
   setTimeout(function () {
    $('#element').tooltip('destroy');
   }, 2000);
})

- doniyor

Answer 3

jsfiddle

不知道为什么即使是bootstrap 4也没有这个功能。无论如何，

HTML

<button class="btn" data-toggle="tooltip" title="helloworld" data-trigger="click" type="button">click</button>

JS

$(document).on('show.bs.tooltip', function (e) {
  if ($(e.target).data('trigger') == 'click') {
    var timeoutDataName = 'shownBsTooltipTimeout';
    if ($(e.target).data(timeoutDataName) != null) {
      clearTimeout($(e.target).data(timeoutDataName));
    }
    var timeout = setTimeout(function () {
      $(e.target).click();
    }, 5000);
    $(e.target).data(timeoutDataName, timeout);
  }
});

$(document).on('hide.bs.tooltip', function (e) {
  if ($(e.target).data('trigger') == 'click') {
    var timeoutDataName = 'shownBsTooltipTimeout';
    if ($(e.target).data(timeoutDataName) != null) {
      clearTimeout($(e.target).data(timeoutDataName));
    }
  }
});

- user1021364

---

这是一个很棒的答案。不确定为什么它没有作为参数选项提供，但这个解决方案救了我的一天...谢谢！ - Jean G.T

Answer 4

如果你正在使用Bootstrap v4，你可以尝试以下方法：

$(document).on('show.bs.tooltip', function (e) {
  setTimeout(function() {   //calls click event after a certain time
   $('[data-toggle="tooltip"]').tooltip('hide');
}, 4000);
});

show.bs.tooltip 事件在触发提示框 show 后被调用。

来源：https://v4-alpha.getbootstrap.com/components/tooltips/#events

- Rishabh Agrahari

Answer 5

Bootstrap已经内置了这个功能，您可以在选项中设置延迟属性（在js中）。

delay: { show: 500, hide: 100 }

在 HTML 中：

data-delay='{"show":"500", "hide":"100"}'

在100毫秒后，hide将被触发。

- V31

---

不，“hide”是鼠标指针离开目标后，工具提示消失的延迟时间。只要指针在目标上，工具提示就会显示。我认为OP想知道如何使工具提示在指针仍在目标上一段时间后消失。 - Paul

@Paul 不一定 - 我也曾经有过同样的问题，因为在按钮上使用了工具提示，当按下按钮时，会向现有 DOM 添加大量 HTML，并将按钮移开。如果没有自动隐藏，用户必须向上滚动页面并单击工具提示才能将其删除。 - Todd

Answer 6

这是简单的答案

$(selector).tooltip({title:"Event", trigger:"focus or hover only", delay:{hide:800}});

在延迟选项中只给出隐藏参数。

我不知道为什么在点击事件上不起作用.....

但在焦点（点击的标签页）和悬停事件上运行良好！

- Shaffron

Answer 7

您可以将触发选项仅设置为悬停。当光标离开特定元素时，自动隐藏工具提示。

$('[data-toggle="tooltip"]').tooltip({
      animation: true
      , container: 'body'
      , html: true
      , placement: 'auto'
      , trigger: 'hover'
});

- rsmdh

Answer 8

无需编写额外的js代码，因为这个功能已经存在于Bootstrap中。假设您不需要在几秒钟后隐藏，但是如果已经阅读了烦人的工具提示，则需要将其删除。如果您需要自动隐藏Bootstrap工具提示（或弹出窗口）的行为，以及在焦点失去或单击工具提示之外的任何地方时使用和样式化元素，则可以使用可聚焦的元素。例如BUTTON。

在模板中使用以下代码：

<button class="tooltip-button"
        role="button"
        data-toggle="tooltip"
        data-placement="right"
        data-html="true"
        data-trigger="focus hover"
        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>

- Aliaksandr Harbunou

Answer 9

如果你和我一样，其他方法都不起作用，那么这是一个关于jQuery的直接解决方案。

HTML:

<span data-toggle="tooltip" title="Button-tooltip" data-placement="top">
<button role="button">Button</button>
</span>

Jquery：

$('[data-toggle="tooltip"]').on("mouseleave", function(){
    $(this).tooltip("hide"); 
})

数据选择器是您想要定位的元素，因此每次鼠标离开该元素时，它将隐藏工具提示。

- Martin Alvarado

Answer 10

在我的情况下，我有多个弹出窗口，并且无法轻松地从创建它的元素中获取弹出窗口ID。 这是我想出的代码，发布出来以帮助其他人：

// get the id for the latest popover
var popid = document.getElementsByClassName('popover')[document.getElementsByClassName('popover').length -1].id;
setTimeout(function () {
    $('#' + popid).fadeOut('slow');
}, 8000);

- cdsln