Show Tooltips in Ellipsis Mode

[Nagendra Gupta]

Dear Team,

Is any ellipsis mode in ejs-combobox for select row ? If exist than our requirement is it's show on Tooltip.  please share us or what is your future plan for this.

[Indhumathy Loganathan]

Hi Nagendra,

By default, whenever a text item overflows the existing width ellipsis will apply to Combo box list items. You can enable tooltips on the Combo box items as shown in the below sample.

https://stackblitz.com/edit/angular-pjm6ud-tdwoi9?file=app.component.ts

Do you want to enable the tooltip only on the ellipsis applied items in the combo box? Please confirm your exact use case with the tooltip component to provide a prompt solution.

Regards,

Indhumathy L

[Nagendra Gupta]

Hello Team,

I appreciate your quick reply but our requirement is not being fulfill from your previous reply. I am sharing image zip actually what our requirement.

Attachment: tooltips_1447cdc8.zip

[Indhumathy Loganathan]

Hi Nagendra,

We understand that you want to show the Tooltip on Combo Box input element. For your reference, we have modified the sample to meet your requirements. Check the below code snippet.

onChange(args) {

  //Close the Tooltip

  this.tooltip.close();

}

onBeforeRender(args: TooltipEventArgs): void {

  // get the target element

  this.content = document.getElementsByClassName('e-input')[0].value;

  this.dataBind();

}

 

ngAfterViewInit(e: any): void {

  this.tooltip = new Tooltip({

    // default content of tooltip

    content: 'Loading...',

    // set target element to tooltip

    target: '.e-input',

    opensOn: 'Hover',

    // set position of tooltip

    position: 'TopCenter',

    // bind beforeRender event

    beforeRender: this.onBeforeRender,

  });

  this.tooltip.appendTo('body');

}

Sample: https://stackblitz.com/edit/angular-pjm6ud-tdwoi9?file=app.component.ts

Please check the shared sample and get back to us if you need any further assistance.

Regards,

Indhumathy L

[Nagendra Gupta]

Hi Indhumathy Loganathan,

In your previous reply tooltip is showing on every input element. But  We want conditionally Tooltip when ellipsis is active. 

[Indhumathy Loganathan]

Hi Nagendra,

We have applied Tooltip for the ellipsis-applied items in the Combo Box items. We have used the beforeOpen event of Tooltip to enable the Tooltip for ellipsis-applied items and cancel it for the other items. Please check the modified code below.

  beforeOpen(args) {

    this.getTextWidth(

      (this.comboBoxObj as any).inputElement.value,

      'bold 12pt arial'

    );

    var dropdownIconWidth =

      this.comboBoxObj.element.querySelector('.e-ddl-icon').clientWidth;

    if (

      this.tempWidth >=

      parseInt((this.comboBoxObj as any).width, 10) - dropdownIconWidth

    ) {

      this.tooltip.content = (this.comboBoxObj as any).inputElement.value;

    } else {

      args.cancel = true;

    }

  }

  getTextWidth(text, font) {

    // re-use canvas object for better performance

    var canvas = document.createElement('canvas');

    var context = canvas.getContext('2d');

    context.font = font;

    var metrics = context.measureText(text);

    this.tempWidth = metrics.width;

  }

Sample: https://stackblitz.com/edit/angular-pjm6ud-cyojid?file=app.component.ts

Please check the sample and get back to us if you need any further assistance.

Regards,

Indhumathy L

[Nagendra Gupta]

Hi Indhumathy Loganathan,

There are problem on your previous reply. Problem is that I placed two combobox in same page. 

When I select ellipsis row from first combobox then same tooltip show on second combobox.

Attachment: Tooltip_1225dee0.zip

[Indhumathy Loganathan]

Hi Nagendra,

In the shared sample, we have set the Tooltip for the input element by using the target property, so that the Tooltip has been rendered for both the input elements. You can overcome this by setting the corresponding Combo Box input element as the target with a unique id value. Check the modified code below.

this.tooltip = new Tooltip({

    // default content of tooltip

    content: 'Loading...',

    // set target element to tooltip

    target: '#games .e-input',

    opensOn: 'Hover',

    // set position of tooltip

    position: 'TopCenter',

    // bind beforeRender event

    beforeRender: this.onBeforeRender,

    beforeOpen: this.beforeOpen.bind(this),

});

this.tooltip.appendTo('body');

Sample: https://stackblitz.com/edit/angular-pjm6ud-sdajps?file=app.component.ts

Please check the sample and get back to us if you need any further assistance.

Regards,

Indhumathy L