Change title attribute dynamically

Question

I'm trying to add custom tooltip for the control icons in GoldenLayout.

So far what i've done is, i'm finding the class of each controller icons and adding a new attribute called tooltip and removing the title attribute.

Which works fine for the close & open in new window, but for the minimise and maximise i need to set the tooltip value dynamically and also need to remove the title attribute

I'm unable to achieve that functionality . Please help

Full code https://jsfiddle.net/sutgfg1y/

myLayout.on('stackCreated', function(stack) {

  stack
    .header
    .controlsContainer
    .find('.lm_close') //get the close icon
    .attr('tooltip', 'Close')
    .removeAttr('title')
  stack
    .header
    .controlsContainer
    .find('.lm_popout') //get the close icon
    .attr('tooltip', 'Open in new window')
    .removeAttr('title')
  stack
    .header
    .controlsContainer
    .find('.lm_maximise')
    .attr('tooltip', 'maxi')
    .removeAttr('title')
    .click(function() {
      var maxi = stack
        .header
        .controlsContainer
        .find('.lm_maximise')
        .attr('tooltip')
      alert(maxi)
    })

});

Answer 1

Hold the current value of the tooltip in a variable. Toggle that value on click, and reset the tooltip...

myLayout.on('stackCreated', function(stack) {
  // Keep track of the state of the tooltip
  var minMax = 'maximize';

  stack
    .header
    .controlsContainer
    .find('.lm_close') //get the close icon
    .attr('tooltip', 'Close')
    .removeAttr('title')
  stack
    .header
    .controlsContainer
    .find('.lm_popout') //get the close icon
    .attr('tooltip', 'Open in new window')
    .removeAttr('title')
  stack
    .header
    .controlsContainer
    .find('.lm_maximise')
    .attr('tooltip', minMax) // Set the starting value
    .removeAttr('title')
    .click(function() {
      // Verify what your click just did
      var maxi = stack
        .header
        .controlsContainer
        .find('.lm_maximise')
        .attr('tooltip');
      alert(maxi);

      // Toggle the tooltip
      minMax = minMax === 'maximize' ? 'minimize' : 'maximize';
      stack
        .header
        .controlsContainer
        .find('.lm_maximise')
        .attr('tooltip', minMax);
    })
});