How can i integrate a component base addon into a custom cell type.

[alcance]

I would like to integrate a tooltip for base cells. (https://github.com/sir-dunxalot/ember-tooltips#is-shown)

I started creating a custom cell type: ember g cell-type base-tooltip

import Cell from 'ember-light-table/components/cells/base';
import TooltipOnElementComponent from 'ember-tooltips/components/tooltip-on-element';

export default Cell.extend({
  effect: 'fade',
  side: 'bottom',
  enableLazyRendering: true,
  event: 'hover',

  init() {
    this._super(...arguments);
    this.isShown=true;
  },

  didInsertElement() {
    this._super(...arguments);
    this.set('title', this.get('value'));
  },

  mouseEnter() {
    console.log('mouse enter');
    this.set('isShown', true);
  }
});

I can see mouse entering event, but how can i add the actual component to the template?

{{#my-component}}
  Hover for more info

  {{tooltip-on-component text='Here is more info!'}}
{{/my-component}}

It seems that his feature was put on hold: #55

Is there anyway I can have a custom template for this or an alternative to accomplish this?

Thanks!

[buschtoens]

You can always use a custom cellComponent. 🙂

[alexander-alvarez]

@alcance how are you defining your columns / table?
You should be overriding http://offirgolan.github.io/ember-light-table/docs/classes/Column.html#property_cellType with base-tooltip

[buschtoens]

@alexander-alvarez I think @alcance has it set up correctly (as the mouse events do fire), but he does not know how to set a custom template to that cell.

@alcance If using a cellComponent is not an option, you could try creating an aptly named template file, e.g. templates/components/light-table/cells/base-tooltip.hbs. If ember-cli doesn't automatically overwrite the default template (set here) you should be able to overwrite it manually by passing it in yourself, just like shown in the highlighted line.

[alcance]

Thanks @alexander-alvarez. Yes, cellType is picked based on a server response. I have other 3 cellTypes but in none of them need to do anything with the template, at most added a className to change the color of the value.

@buschtoens. I tried cellComponent with no success I will take a closer look, i must be doing something wrong. Also tried creating the template manually creating the template/components folder (i am using pods).

Seems that the last option is the most viable, will try that and update this issue.

Thanks for the feedback

[buschtoens]

With pods this should work.

// app/components/light-table/cells/base-tooltip/component.js
import Cell from 'ember-light-table/components/cells/base';
import layout from './template';

export default Cell.extend({
  layout,

  // ...
});

{{!-- app/components/light-table/cells/base-tooltip/template.hbs --}}
{{value}}

{{tooltip-on-component text='Here is more info!'}}

[alcance]

Ended using lastest solution presented.

Thank you.