Jquery, real time "title" attribute change

Question

I have a span that shows some datas in tooltip every second that comes from server:

<span class="bata hastip" title="{will change}"></span>

And I'm using tooltipsy plugin to show tooltip:

$('.hastip').tooltipsy({
        offset: [-10, 0],
        css: {
            'background-color': '#444F54',
            'border': '1px solid #888'
        }
})

Since my data change every few second, how can I detect that change? like this:

$('.bata').prop('title', datas);
//$('.bata').attr('title', datas) same...

$(document).on('change', '.bata', function(){
   //this method doesn't work
});

Answer 1

"You are referring to DOM Mutation Events. There is poor (but improving) browser support for these events. Mutation Events plugin for jQuery might get you some of the way."

See this related question : firing event on DOM attribute change

Shortcut - check this :)

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Support's pretty good, except IE11+

Example usage from MDN :

// select the target node
var target = document.querySelector('#some-id');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });    
});

// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };

// pass in the target node, as well as the observer options
observer.observe(target, config);

// later, you can stop observing
observer.disconnect();