自动隐藏引导提示

Auto hide bootstrap tooltip

本文关键字：提示 隐藏      更新时间：2023-09-26

我想在几秒钟后自动隐藏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">

我在所有引导工具提示上使用这个设置来自动隐藏整个页面:

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

try this

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

Bootstrap自带这个属性，你可以在options (in js)中设置一个delay属性

delay: { show: 500, hide: 100 }

和在HTML中:

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

隐藏将在100毫秒后触发

jsfield

不知道为什么连bootstrap 4都没有内置这个功能。反正

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

如果您使用的是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

这里是简单的答案

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

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

我不知道为什么不工作点击事件.....

但是焦点(点击标签)和悬停事件工作得很好!!

如果你和我一样，这是一个直接的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"); 
})

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

以下是bootstrap 3 manual onclick tooltip autohide的解决方案:

var el = $(document).find('#element');
el.tooltip({
  "title": "Some title",
  "trigger": "manual",
  "placement": "top"
});
el.tooltip('show');
setTimeout(function() {
  el.tooltip('hide');
}, 900);

不需要编写额外的js代码，因为这个功能已经存在于Bootstrap中。让我假设你不需要隐藏几秒钟后，但你需要删除恼人的工具提示，如果它已经被读取。如果你需要在焦点上自动隐藏引导工具提示(或弹出窗口)或点击工具提示外的任何地方，使用和样式化可以在焦点上的元素。例如BUTTON。

模板中使用code:

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

在我的情况下，我有多个弹出窗口，不能很容易地从创建它的元素中获得弹出窗口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);

您可以使用触发器选项作为悬停。当光标离开特定元素时，自动隐藏工具提示。

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