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

Answer 1

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

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

Answer 2

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

delay: { show: 500, hide: 100 }

并在HTML中：

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

在100毫秒后隐藏将被触发

Answer 3

试试这个

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

Answer 4

如果您正在使用Bootstrap v4，那么您可以试试这个：

publisherFormat

在触发工具提示

$(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事件。

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

Answer 5

jsfiddle

不知道为什么即使bootstrap 4也没有内置此功能。无论如何

<强> HTML

import java.util.Scanner;
public class Average
{
    public void Average()
    {
        Scanner in = (new Scanner("J:\\AP Comptuter Science\\Semester 2\\Exeptions\\13.1\\numbers.txt"));
        try{
            String test = in.nextLine();
        } catch(NullPointerException i) {
            System.out.println("Error: " + i.getMessage());
        }

        int total = 0;
        int counter = 0;

        while(in.hasNextInt()){
            total = total + in.nextInt();
            counter++;
        }
        total = total / counter;
        System.out.println(total);
    }
}

<强> JS

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

Answer 6

这是简单答案

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

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

我不知道为什么单击事件不起作用.....

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

Answer 7

如果您像我一样，但其他所有方法均无效，那么这是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"); 
})

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

Answer 8

这是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);

Answer 9

不需要编写其他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>

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);

自动隐藏引导工具提示

10 个答案: