Context
-------

I have a small Ember app, which, amongst other things, displays a number of connected users and, when hovering an element of the page, their names as a list.

All in all, it works quite well. The applications pulls data from a REST endpoint every two minutes, as the backend didn't allow for pushing data. 

The contents of the tooltip are computed in the Controller, with a function that basically concatenate strings in various ways according to the context. Then it's bound to a data attribute of the `<img>` the tooltip is created on. When the View is ready and `didInsertElement` is fired, the tooltip is generated (if needs be) based on this `data-bindattr` value.

Question
--------

When new data is pulled from the backend, everything is updated accordingly, except the tooltip content. (When browsing the page's DOM, the `data-bindattr` value is updated too.)

**What could cause the tooltip to not refresh? Is it a case of JQuery-UI not calculating it again?**

Some code
---------

### Refreshing code in the app's controller:

```
Monitor.ApplicationController = Ember.ArrayController.extend({
  itemController: 'process',
  sortProperties: ['name'],
  sortAscending: true,
  intervalId: undefined,
  startRefreshing: function() {
    var self = this;
    if (self.get('intervalId')) {
      return;
    }
    self.set( 'intervalId', setInterval(function() {
      self.store.find('process');
    }, 120000 ));
  }
});

```

### View: Process.hbs

```
<div {{bind-attr class=":inline inactive:inactive"}}>
    <img {{bind-attr src=icon}} {{bind-attr data-caption=contentText}} class="caption" />
    <div class="counter">{{nbUsers}}</div>
</div>

```

### View: ProcessView

```
Monitor.ProcessView = Ember.View.extend({
  // (...) Various stuff.
  didInsertElement: function() {
    this.updateTooltip();
  },
  updateTooltip: function() {  
    console.log('Inside updateTooltip!');
    if (!this.$()) {return;}  
    if (this.get('controller').get('inactive')) {
        this.$().tooltip({items: '.caption', disabled: true});
        return;
    }
    this.$().tooltip({
        items: '.caption',
        tooltipClass: 'tooltip',
        content: function() {
            return $(this).data('caption');
        },
        position: {
            my: 'left+15px center',
            at: 'right center',
            collision: 'flip'
        },
        show: false,
        hide: false
    });
  }.observes('controller.inactive', 'controller.contentText')
});

```

### Controller: ProcessController

```
Monitor.ProcessController = Ember.ObjectController.extend({
  contentText: function() {
    var tooltipContent = '';
    this.get('containers').forEach(function(container) {
    // Do a lot of things to tooltipContent involving: 
    // container.get('name')
    // container.get('text')
    // container.get('size')
    // container.get('nbUsers')
    // The data-bindattr value refreshes correctly so I cut this out for readability.
    return tooltipContent;
  }.property('name', 'containers.@each')
});

```

### Edit 1:

Replaced 'containers.@each' by 'contentText' in the observer and added logging.