Tooltip script. Need to correct code

Question

$(function() {
    $('.challenge').tooltip({html: true, trigger: 'hover'});

    $('.challenge').mouseover(function(){
    var that = $(this);
    var ajaxQueue = $({
    url: "<?=base_url();?>/ajax/challenge_tip",
     type: 'POST',
     cache: true,
     data: {
      'idd': $(this).attr("rel"),
     },
     dataType: 'json',
       success: function(challenge_j) {
         that.tooltip('hide')
        .attr('data-original-title', challenge_j)
        .tooltip('fixTitle')
        .tooltip('show');
       }
  });

  $.ajaxQueue = function(ajaxOpts) {

    var oldComplete = ajaxOpts.complete;

    ajaxQueue.queue(function(next) {

      ajaxOpts.complete = function() {
        if (oldComplete) oldComplete.apply(this, arguments);

        next();
      };

      $.ajax(ajaxOpts);
    });
  };
});
});

it's my first experience with js and i need some help. for tooltips i use bootstrap tooltips. when cursor hover on link, script send post data to controller and receive callback data. in the first hover script receives the data, but tooltip doesn't pop up, only the second hover. how i can fix it?

and one more question. can script will send the request only the first mouse hover, and the following hover will use the information from the cache?

and sorry my english ;D

@mplungjan one doesn't help. I try to explain the problem more accurately. i have list of links. when i hover to link first , tooltip doesn't pop up. when i hover to other link, tooltip pops up, but with data from first link. — Vitaliy, Feb 10 '13 at 13:42
What is data-original-title? sounds like you use another tooltip script to get this value. You will need to re-bind that if you change the title. — mplungjan, Feb 10 '13 at 16:17
@mplungjan in bootstrap tooltip data contains it the data-original-title. why rebind? — Vitaliy, Feb 10 '13 at 16:39
I have never used bootstrap, but I could imagine that it is not dynamic after it has been assigned - http://stackoverflow.com/questions/9501921/change-twitter-bootstrap-tooltip-content-on-click — mplungjan, Feb 10 '13 at 17:14
@mplungjan I've tried everything but nothing helps. maybe if you look what I get, then you can better understand what I want. look warthunder-db.ru/challenge — Vitaliy, Feb 11 '13 at 10:42

score 0 · Answer 1 · edited Feb 10 '13 at 14:08

Create flag for ajax query.

var isTooltipTextEmpty = true;

$('.challenge').mouseover(function(){

    if(isTooltipTextEmpty) {

     ...add ajax query here)

    }

}

And you need to trigger tooltip show event, when ajax query is ready like this

.success(data) {

     $('.challenge').show();
     isTooltipTextEmpty = false; //prevents multiple ajax queries

}

See more here: Bootstrap Tooltip

score 0 · Accepted Answer · answered Feb 11 '13 at 10:52

0

It is hard to test cross domain

Here is what I THINK you need

$(function() {
  $('.challenge').tooltip({html: true, trigger: 'hover'});

  $('.challenge').mouseover(function(){
    var that = $(this);
    $.ajax({
     url: "<?=base_url();?>/ajax/challenge_tip",
     type: 'POST',
     cache: true,
     data: {
      'idd': $(this).attr("rel"),
     },
     dataType: 'json',
       success: function(challenge_j) {
         that.tooltip('hide')
        .attr('data-original-title', challenge_j)
        .tooltip('fixTitle')
        .tooltip('show');
       }
    });
  });
});

answered Feb 11 '13 at 10:52

mplungjan

169,008
28
173
236

wow! cool, but one little problem. with repeated cursor hover repeated request to the server and tooltips doesn't show correctly. u can look it here warthunder-db.ru/challenge – Vitaliy Feb 11 '13 at 11:07
Hmm, you need [hoverintent](http://cherne.net/brian/resources/jquery.hoverIntent.html) then – mplungjan Feb 11 '13 at 12:53
i can't understand. why use hoverintent? it only makes the delay to floating tips. i have problems with the lack of cache queries and incorrect display hints during the second hover as you saw. – Vitaliy Feb 11 '13 at 13:40
The hoverintent will make the hover wait for the user to slow down, so no unnecessary ajax is made on links he is not interested in. So when the user slows down, the ajax is executed but not on the next link he moses ove – mplungjan Feb 11 '13 at 13:59
Do you have another option? this version I do not like. – Vitaliy Feb 11 '13 at 14:23
you need to then queue the ajax instead so they do not fall over each other. http://stackoverflow.com/questions/3709597/wait-until-all-jquery-ajax-request-are-done/3710359#3710359 – mplungjan Feb 11 '13 at 14:40
I apologize for a lot of questions. i'm a little stupid) i updated code in first code, check it (don`t work). – Vitaliy Feb 11 '13 at 15:10
Sorry, never needed ajaxqueue – mplungjan Feb 11 '13 at 17:11

Tooltip script. Need to correct code

2 Answers2