Bootstrap工具提示不会隐藏在<a> tag click

Question

I'm using the trigger as hover, but when I click on a link with this function the tooltip does not disappear, it will be disturbing on the screen forever

the tooltip is instantiated with this code

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

in tags everything works perfectly, and in some cases works too, I do not know why some happen this, could someone give me a light?

Edit: I've also tried using this code to hide the tooltip with the click event

$(document).ready(function(){
     $('[data-toggle="tooltip"]').click(function () {
         $('[data-toggle="tooltip"]').tooltip("hide");
     });
});

But it doesn't work

Edit*: Picture of how it is (the text is in Portuguese)

上

编辑**：HTML代码

<ul style="clear: both;" class="pager wizard">
    <li class="button-previous previous"><a title="Voltar" data-toggle="tooltip"><i class="fa fa-arrow-left"></i></a></li>
    <li class="voltar"><a title="Voltar" data-toggle="tooltip"><i class="fa fa-arrow-left"></i></a></li>

    <li class="finalizar"><a>Finalizar<i class="fa fa-check" style="padding-left:5px;"></i></a></li>
    <li class="next"><a class="competencia-stripe" data-toggle="tooltip" title="Continuar"><i class="fa fa-arrow-right" ></i></a></li>
</ul>

Answer 1

此代码用于标记单击以隐藏鼠标悬停，而您从下面的代码中删除“单击事件”以将鼠标悬停不隐藏。

  

尝试此代码...！ 已成功。

@Configuration
public class CustomServletContextInitializer implements ServletContextInitializer {

    @Override
    public void onStartup(ServletContext sc) throws ServletException {
        sc.setInitParameter("primefaces.THEME", "cruze");
    }

}

$('[data-toggle="tooltip"]').tooltip({
    trigger : 'hover'
})
$('.btn-secondary').click(function(){
	$('[data-toggle="tooltip"]').tooltip('hide');
});

.tooltiphide {
  margin-top: 50px;
  margin-top: 50px;
}

Answer 2

我能够以简单的方式解决它，这是解决方案

window.addEventListener("click", function (event) {
   $('.tooltip.fade.top.in').tooltip("hide");
}

Answer 3

您是否尝试过将load事件放入工具提示元素中？

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

Answer 4

您还需要绑定点击功能
https://getbootstrap.com/docs/4.0/components/tooltips/

$('[data-toggle="tooltip"]').tooltip({
    container: 'body',
    trigger: 'hover click'
});

Answer 5

<a>标记定义了一个超链接，该超链接用于将一个页面链接到另一页面。 因此不适用于此类单页操作。但是您可以通过.focusout()

来消除对元素的关注来解决此问题

$(document).ready(function(){
   $('[data-toggle="tooltip"]').click(function(){
      $(this).focusout();
   });
});

Answer 6

这是因为未设置触发器。触发器的默认值为“悬停焦点”，因此在单击一个按钮后，工具提示将保持可见状态，直到单击另一个按钮为止，因为该按钮已聚焦。

因此，您要做的就是将触发器定义为仅“悬停”。在单击按钮后，没有持久化工具提示的情况下，链接到以下示例：

$('[data-toggle="tooltip"]').tooltip({
    trigger : 'hover'
})  

小提琴中的文档示例-> http://jsfiddle.net/vdzvvg6o/