Changing cluetip content after page load

Question

I want to change cluetip content after the page is loaded.

Let's say I have a button in my cluetip and after clicking it, I want it gone.

So here's the cluetip:

 $('a.notice_tooltip').cluetip({activation: 'click', cluetipClass: 'jtip' ,
 local:true ,   positionBy: 'bottomTop' , arrows: true,   sticky: true  ,   closePosition: 'title' });

HTML:

    <a class="notice_tooltip" href="#" rel="#info_div"  > open tooltip </a>
    <div id="info_div"> 
    <input class="btn' type="button" >
    <input class="btn2' type="button" >
    </div>

Here is the click event:

$('.btn').click(function(){
  //do stuff

  $(this).parent().append(some_message);
  $(this).remove();

})

$('.btn2').click(function(){
  //do stuff

  $(this).parent().append(some_message);
  $(this).remove();

})

This would remove the button and append a message to it's parent but when I reopen the cluetip, it's the old content again.

It's like, the plugin gets the DOM structure when the page is loading and after that, it doesn't care about the page changes.

I've tried to run the plugin again every time it gets closed.

 $(function(){

    $('.btn').click(function(){
      //do stuff
      $(this).remove();

    })

        $('a.notice_tooltip').cluetip({activation: 'click', cluetipClass: 'jtip' , local:true ,   positionBy: 'bottomTop' , 
        arrows: true,   sticky: true  ,   closePosition: 'title' , onHide : function(ct,c) {

          retooltip();

          }

        });
 })

     function  retooltip(){
       $('a.notice_tooltip').cluetip('destroy');
       $('a.notice_tooltip').cluetip({activation: 'click', cluetipClass: 'jtip' , local:true ,
         positionBy: 'bottomTop' , arrows: true,   sticky: true  ,   closePosition: 'title' , onHide : function(ct,c) {
           retooltip();

         }

       });
      }

It's still the same.

might check this question... http://stackoverflow.com/questions/1950197/jquery-cluetipdestroy-does-not-destroy-remove-cluetip and destroy the cluetip before you re-add it. — Jared, Jul 29 '12 at 03:03

Michael Robinson · Accepted Answer · 2012-08-01T20:56:59.983

1

The problem

Each time Cluetip is closed, it throws its content away, and retrieves it from the original element next time it's opened. This means that if you want to make persistent modifications to the content of a Cluetip, you have to also make those modifications to the original element.

A possible solution

When your button is clicked, look up until you find the cluetip inner wrapper, and select its first child div. Use this to find the original div, and remove the button inside that. Then remove the clicked button.

$(function(){
    $('a.notice_tooltip').cluetip({
        activation: 'click', 
        cluetipClass: 'jtip',  
        local: true,
        positionBy: 'bottomTop', 
        arrows: true,   
        sticky: true  ,
        closePosition: 'title'
    });

    $('.btn').click(function(){
        // Find the original element
        var originalId = $(this).closest('.cluetip-inner > div').attr('id');            
        // Remove it
        $('#' + originalId).find('.' + $(this).attr('class')).remove();
        // Remove the clicked button
        $(this).remove();
    });

});

Working example.

edited Aug 01 '12 at 20:56

answered Aug 01 '12 at 07:37

Michael Robinson

27,775
10
102
126

thanx , i should've been more clear . there could be another button and a message would append the to tooltip after pressing the button and also i'm using this for user notification so there could be many notices at the same time in the tooltip so it's not very easy to keep track of each button – max Aug 01 '12 at 08:49
thanx seems to be working on the jsfiddle , i'll give it a try – max Aug 02 '12 at 13:43
@max let me know how you get on? – Michael Robinson Aug 05 '12 at 11:35
sorry it's been a extremely busy week . i've just test it and it works great thanx to you . it seems like clue tip makes a clone of the original element and that's why my changes doesn't effect the tooltip , am i right ? – max Aug 05 '12 at 23:30
@max yes I think that is what it does - means we have to make sure modifications to cluetip's content must be reflected in the original. Bit hacky, but tbh cluetip cuts some corners too. – Michael Robinson Aug 05 '12 at 23:33

Changing cluetip content after page load

1 Answers1

The problem

A possible solution