Question

在基于bootstrap 3.5的网站中，我们将在单击按钮时更改输入文本工具提示，并在三秒钟内删除工具提示。

<input type="text" id="sample" title="Tip">
<button name="change me" id="changeBtn">Change Tool Tip!</button>



//Initiall tooltip for all elements
$("[title!='']").tooltip();

$("#changeBtn").click(function () {

    //Change tooltip text
    $("#sample").attr('title', 'New Tip!').tooltip('fixTitle').tooltip('show');

    //remove tooltipe after 3 sec
    setTimeout(function () {
        $(this).tooltip('destroy');
    }, 3000)

})

http://jsfiddle.net/red4w2re/

问题是工具提示没有被破坏并继续显示。如果我将$(this).tooltip('destroy');更改为$("[title!='']").tooltip('destroy');它会起作用，但它不正确，因为它会删除所有其他工具提示。

任何评论？

Answer 1

由于this中setTimeout的上下文发生了变化，请将this的副本保存到新变量中并使用该变量：

$("#changeBtn").click(function () {

    var _this = this;

    setTimeout(function () {
        $(_this).tooltip('destroy');
    }, 3000)

})

scope and context here上有一些非常宝贵的信息。

Answer 2

在setTimeout中，this不是您的工具提示，因此您必须先将其保存在变量中：

$("#changeBtn").click(function () {
    // Save tooltip
    var myTooltip = $("#sample").attr('title', 'New Tip!');

    //Change tooltip text
    myTooltip.tooltip('fixTitle').tooltip('show');

    //remove tooltipe after 3 sec
    setTimeout(function () {
        myTooltip.tooltip('destroy');
    }, 3000)
});

Working example

Answer 3

试试这个

＆＃13;

index = random.randrange(len(self.dataItem) - 1)
if self.dataItem[index] > self.dataItem[index + 1]:
    return True

＆＃13;

//Initiall tooltip for all elements
$("[title!='']").tooltip();
$("#changeBtn").click(function() {
  //Change tooltip text
  $("#sample").attr('title', 'New Tip!').tooltip('fixTitle').tooltip('show');
  //remove tooltipe after 3 sec
  setTimeout(function() {
    $("#sample").attr('title', 'New Tip!').tooltip('fixTitle').tooltip('hide');
  }, 3000)
})

＆＃13;

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 body {
  margin: 30px;
}

＆＃13;

Answer 4

查看我的修复程序。如您所见，问题在于使用此关键字：

$("[title!='']").tooltip();

$("#changeBtn").click(function () {

    $("#sample").attr('title', 'New Tip!').tooltip('fixTitle').tooltip('show');

    setTimeout(function () {
        $("[title!='']").tooltip('destroy');
    }, 3000)

})

Answer 5

我认为使用thas更好：

$(function ()
{
    let tooltipTarget = $('[data-toggle="tooltip"]');
    $(tooltipTarget).tooltip({delay: { "show": 100, "hide": 300 }});

    let timeoutHandler = null;

    $(tooltipTarget).on('show.bs.tooltip', function () {
        let that = this;

        clearTimeout(timeoutHandler);

        timeoutHandler = setTimeout(function () {
            $(that).tooltip('hide');
        }, 3000);
    });
});

三秒钟后隐藏bootstrap工具提示

5 个答案: