9

我想在几秒钟后自动隐藏 Boostrap 工具提示。

 <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">
4

10 回答 10

22

我使用它在所有引导工具提示上进行页面范围的自动隐藏：

$(function () {
   $(document).on('shown.bs.tooltip', function (e) {
      setTimeout(function () {
        $(e.target).tooltip('hide');
      }, 10000);
   });
});
于 2015-09-22T10:55:21.857 回答
4

试试这个

$('#element').on('shown.bs.tooltip', function () {
   setTimeout(function () {
    $('#element').tooltip('destroy');
   }, 2000);
})
于 2014-08-01T08:24:04.927 回答
3

Bootstrap 开箱即用，您可以在选项中设置延迟属性（在 js 中）

delay: { show: 500, hide: 100 }

在 HTML 中：

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

100 毫秒后将触发隐藏的位置

于 2014-08-01T08:34:12.167 回答
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));
    }
  }
});
于 2016-01-21T03:24:25.090 回答
3

如果你使用的是 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.tooltipshow触发工具提示后调用事件。

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

于 2017-08-31T09:26:34.553 回答
0

这是简单的答案

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

仅在延迟选项中提供隐藏参数。

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

但在焦点（点击标签）和悬停事件上工作正常！！

于 2016-08-04T02:38:13.147 回答
0

如果您像我一样并且所有其他方法都不起作用，那么这是 jquery 上的直接解决方案。

HTML：

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

查询：

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

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

于 2018-10-31T11:43:21.420 回答
0

这是 bootstrap 3 手动 onclick 工具提示自动隐藏的解决方案：

var el = $(document).find('#element');
el.tooltip({
  "title": "Some title",
  "trigger": "manual",
  "placement": "top"
});
el.tooltip('show');
setTimeout(function() {
  el.tooltip('hide');
}, 900);
于 2019-03-08T22:07:00.367 回答
0

不需要编写额外的 js 代码，因为这个功能在 Bootstrap 中已经存在。让我假设您不需要在几秒钟后隐藏，但是如果已经阅读了烦人的工具提示，则需要删除它。如果您需要自动隐藏 Bootstrap 工具提示（或弹出框）等行为，或者单击工具提示之外的任何位置，请使用和样式化可以聚焦的元素。例如按钮。

在模板使用代码中：

<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>
于 2019-05-05T08:14:10.383 回答
0

就我而言，我有多个弹出窗口，并且无法从创建它的元素轻松获取弹出窗口 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);
于 2020-06-11T21:52:45.863 回答