CODEWITHSUNDEEP
javascriptjqueryjquery-tooltip
Alaychem goes to Codidact
Alaychem goes to Codidact

Reputation: 533

How to change text of jquery created tooltip?

I have an application that displays web pages which contains source reference, when user hover above the source reference a tooltip with extra information appears. I want to change tooltip text dynamically to responseText if communication with the server was successful (see method below) - but I don't know how . (I already make sure the the respomseText contains the right data) the tooltip is generated and it's data is sent by this jQuery code:

$(document).ready(function() {
    $('table a').on('mouseenter._do_submit', _do_submit);
    $('table a').tooltip({ 
        tooltipClass: "coolToolTip",
         content: function() {
            var element = $( this );
            return '<p class=toolTipP>' +element.text(); + '</p>';
            }
    });

    $('table').bind('mouseleave._remove_icon', _remove_icon);

    function _remove_icon(event) {  $(event.target).find('img').remove();   }


    function _do_submit(event)  {
        $event_origin   = $(event.target); 

        $event_origin.find('img').remove();
        ajax_sender( $event_origin );
    }

    function ajax_sender(event_origin_obj) {
            $('<img src="./js/ajax_ani.gif" />').appendTo(event_origin_obj);        
            url= 'http://localhost:8080/zoharTranslator/ReadZohar';

            var xhr = $.ajax({
                    type: 'GET', 
                    url: url, 
                    data: 'command=source&src=' +  event_origin_obj.text(), 
                    beforeSend: beforeSending,
                    success: on_success, 
                    error: log_error_message
                });

            function on_success(data) {
                event_origin_obj.find('img').remove();
                $(document).removeAttr("title");
                event_origin_obj.attr( "title", data);
                console.log(xhr);
            }

            function log_error_message(xhr) {
            ...
            }

            function beforeSending(xhr) {
            ...
            }
    }
});

Upvotes: 1

Views: 309

Answers (1)

gfrobenius
gfrobenius

Reputation: 4067

You can always change the content of your tooltip after its created by using it's setter like this...

$( ".selector" ).tooltip( "option", "content", "Awesome title!" );

-- 2ND UPDATE -- OK, I figured out how to get the jQuery UI added to jsFiddle. This is how I would solve your problem: http://jsfiddle.net/spZ69/3/ Obviously the ajax call won't work but just replace the url ajax/test.html with your url that returns text and it will replace the tooltip's text.

Upvotes: 3

Related Questions