CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrap-3tooltip
Cristian Bustos
Cristian Bustos

Reputation: 369

How to hide text in a tooltip last few seconds, after ajax call with jQuery?

I have a link which will have a tooltip of bootstrap. I run an ajax call, where if the call is successful, change the tooltip text, but can not make the text disappear after a few seconds.

Code link:

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

Code ajax call:

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

    });

Then as I can hide the tooltip text that changed after the ajax call after a few seconds? I hope your friends help. Greetings From Chile.

Solution:

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

   }

Upvotes: 1

Views: 618

Answers (2)

user2267175
user2267175

Reputation: 593

Just use a timeout right after the text is added

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

    }

Upvotes: 1

Mark Calm
Mark Calm

Reputation: 1

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

});

//it will fade after the timeout which .delay(3000) last.

Upvotes: 0

Related Questions