Search code examples
jqueryajaxtitlecluetip

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


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


Solution

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