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

Question

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.

Answer 1

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.

Answer 2

You can always hide the title and simulate it using the ajax response.

Answer 3

Cluetip caches the title when it is first created. As a result, you have to change it in the onShow option. Trying to change it in the ajaxProcess step will lead to your changes being overwritten.

However, you could use the ajax setting option to get the title you want and store that title in a variable.

Keep in mind that cluetip caches the ajax result by default. You can set ajaxCache: false to change that.

Here is some example code

var title;
$('a.clue').cluetip({
    ajaxSettings:  {
        success: function(data) {
            // GET Title here
            title = 'new title';
        }
    },
    ajaxCache: false,
    onShow : function(ct,c) {
         $("#cluetip-title").text(title);
    }
});

You could also use the ajaxProcess option but you would need to make sure you called the default for that option to ensure that it strips script and style tags.

Answer 4

You can do something like this:

$('a.basic').cluetip({
    ajaxProcess: function(data) {
        // Suppose the data come with the following structure:
        data = { title: "Another title", body: "Blah blah blah blah" };

        $(this).attr("title", data.title);
        return data.body;
    },
    onShow: function(ct, c) {
        ct.find(".cluetip-title").text(
            $(this).attr("title")
        );
    }
});

See it in action here: http://jsfiddle.net/A9EQ5/20/

Answer 5

  $('a.basic').cluetip({
      sticky: true,
      closePosition: 'title',
      ajaxCache: false,
      ajaxProcess: function(data) {
        data = {title: "AjaxTitleGoesHere", body:"AjaxBodyGoesHere"};
        $(this).attr("title", data.title);
        return data.body;
      },
      onShow: function(ct, c) {
        ct.find(".cluetip-title").append(
            $(this).attr("title")
        );
      }
  });