Question

我有一个链接，其中包含一个bootstrap工具提示。我运行一个ajax调用，如果调用成功，则更改工具提示文本，但几秒钟后文本不会消失。

代码链接：

<a href="" class="btn-add pull-right" data-id="1" data-toggle="tooltip" data-placement="bottom" data-original-title="Add to favs."><i class="fa fa-heart-o color-icon"></i></a>

代码ajax调用：

$(document).ready(function() {
    $('.btn-add').on('click', function(e) {
        var $this = $(this);
        var data = $this.data('id')

        $.ajax({
           type: 'POST',
           url: '{!! url("add") !!}',
           data: { 'id' : data },
           dataType: 'JSON',
           beforeSend: function(){
                $this.html('<i class="fa fa-spinner fa-spin"></i>');
           },
          success: function(data){
                if(data.message == 'ok')
                {
                    $this.html('<i class="fa fa-heart color-icon"></i>').attr("title","Added success").tooltip("fixTitle").tooltip("show");

                }
          }
      })

        e.preventDefault();

    });

然后我可以隐藏几秒后ajax调用后更改的工具提示文本？我希望你的朋友帮忙。来自智利的问候。

解决方案：

  if(data.message == 'ok')
 {
    $this.html('<i class="fa fa-heart color-icon"></i>').attr("title","Added success").tooltip("fixTitle").tooltip("show");
      setTimeout(function(){
        $this.tooltip('hide').tooltip('disable');
    }, 3000);

   }

Answer 1

在添加文本后立即使用超时

if(data.message == 'ok')
    {
       $this.html('<i class="fa fa-heart color-icon"></i>').attr("title","Added success").tooltip("fixTitle").tooltip("show");

    setTimeout(function() {
        $this.html('<i class="fa fa-heart color-icon"></i>').attr("title","").tooltip("").tooltip("hide");
    }, 5000); //5000 ms -> 5 seconds

    }


//If the above doesn't work, try this..

if(data.message == 'ok')
    {
       $this.html('<i class="fa fa-heart color-icon"></i>').attr("title","Added success").tooltip("fixTitle").tooltip("show").delay(3000).tooltip("hide");

    }

Answer 2

$(document).ready(function() {
$('.btn-add').on('click', function(e) {
    var $this = $(this);
    var data = $this.data('id')

    $.ajax({
       type: 'POST',
       url: '{!! url("add") !!}',
       data: { 'id' : data },
       dataType: 'JSON',
       beforeSend: function(){
            $this.html('<i class="fa fa-spinner fa-spin"></i>');
       },
      success: function(data){
            if(data.message == 'ok')
            {
                $this.html('<i class="fa fa-heart color-icon"></i>').attr("title","Added success").tooltip("fixTitle").tooltip("show").delay(3000).fadeOut();;

            }
      }
  })

    e.preventDefault();

});

//它会在超时之后淡出.delay（3000）持续。

在使用jQuery调用ajax之后，如何在工具提示中隐藏文本？

2 个答案: