How can I set the title of a cluetop tooltip from ajax callback when sticky: true?

Question

Question by leora

I am using cluetip plugin which is great. I am populating the plugin using Ajax but I can’t anywhere (in the documentation or examples) on how to set the title from an ajax callback.

Is updating the title from ajax supported in cluetip?

UPDATE NOTE:

So the suggestions given below work in the sense that they can create a title but the close button doesn’t show up in the title in this case. See image below.

enter image description here

Answer 1

Answer by Starx

Starx

Actually, It is pretty easy if you see from a simple angle.

First thing to note, would be that all the cluetips in the document, use only one mark-up layout to show all the tips. Every time a new cluetip is triggered, it only updates its mark-up layout and shows it.

Lets see an example of how to work around with what you are trying

I used the demo for this. So the mark-up is:

_{Note:I am using two cluetips to simulate a case having multiple cluetips}

<a class="title" title="hello" href="http://plugins.learningjquery.com/cluetip/demo/ajax3.html" rel="http://plugins.learningjquery.com/cluetip/demo/ajax3.html">This example</a>

<a class="basic" href="http://plugins.learningjquery.com/cluetip/demo/ajax.html" rel="http://plugins.learningjquery.com/cluetip/demo/ajax.html">Basic</a>

Lets make a small change in the styles, so that it aligns correctly

.cluetip-close { float: right; margin-top: -40px; }

Now, our Script, for both the clue tips.

  var title;
  $('a.title').cluetip({
      closePosition: 'top',
      sticky: true,
      closeText: '<img src="http://plugins.learningjquery.com/cluetip/demo/cross.png" alt="close" width="16" height="16" />Close',            
      ajaxCache: false,
      ajaxSettings:  {
        success: function(data) {
            title = "Your new Title";            
            $(this).attr("title", title); //just set the title for consistency
        }
      },
      onShow : function(ct,c) {
          $(".cluetip-title").text(title); //update the title class with the title
      }
  });

  $('a.basic').cluetip(); //While definning another tip, it is NOT affected by previous one

It’s DONE

Although the fiddle might not show it. I have tested it and it works.