Tooltip on the selected item (not on the searching list)

Is your feature request related to a problem? Please describe. I need to see the title for the selected option, because usually the text is too long to be shown on a small input size.

Describe the solution you’d like I want to put title attribute (tooltip) for the selected item from the list to see the tooltip while mouse is over the ng-select input.

Additional context

<ng-select 
        [items]="bookkeepingAccounts | async"
        formControlName="bookkeepingAccount"
        [searchFn]="searchBookkeepingAccount"
        (change)="bookkeepingAccountChanged($event)"
        required>

        <ng-template ng-label-tmp let-item="item">
          <span> [title]="item.title">{{ item.code }} {{ item.title }}</span>    // <-- this DOES NOT work
        </ng-template>
        <ng-template ng-option-tmp let-item="item">
          <span [title]="item.title">  // <-- but this DOES work
            {{ item.code }} <br />
            <small>{{ item.title }}</small>
          </span>
        </ng-template>
      </ng-select>

[earshinov]

Hey! I think this issue lacks a demo page. I’ve prepared one: https://stackblitz.com/edit/ng-select-items-tooltip

On this demo page you can see that generally it is possible to add a tooltip both for select options and the selected value. There is only one problem I’m concerned with: for single-selection ng-select’s, the selected item tooltip doesn’t show up.

It happens because, due to the way single-selection ng-select’s are designed, the selected item label is obscured by a transparent input box that intercepts clicks:

In order for the tooltip to show up, it has to applied to the .ng-value-container element rather than the selected item label. But ng-select is not customizable at that level, which is understandable:

<div class="ng-value-container">
    <div class="ng-placeholder">{{placeholder}}</div>

    <ng-container *ngIf="!multiLabelTemplate && selectedItems.length > 0">
        <div [class.ng-value-disabled]="item.disabled" class="ng-value" *ngFor="let item of selectedItems; trackBy: trackByOption">
            <ng-template #defaultLabelTemplate>
                <span class="ng-value-icon left" (click)="unselect(item);" aria-hidden="true">×</span>
                <span class="ng-value-label" [ngItemLabel]="item.label" [escape]="escapeHTML"></span>
            </ng-template>

            <ng-template
                [ngTemplateOutlet]="labelTemplate || defaultLabelTemplate"
                [ngTemplateOutletContext]="{ item: item.value, clear: clearItem, label: item.label }">
            </ng-template>
        </div>
    </ng-container>

    <ng-template *ngIf="multiLabelTemplate && selectedValues.length > 0"
            [ngTemplateOutlet]="multiLabelTemplate"
            [ngTemplateOutletContext]="{ items: selectedValues, clear: clearItem }">
    </ng-template>

    <div class="ng-input">
        <input #searchInput ...>
    </div>
</div>

This HTML code, taken from ng-select implementation, is fairly large and complicated, so hardly any of ng-select users would want to duplicate it in their application code in order to apply customizations. And as far as I see, such duplication cannot be avoided. If Angular allowed content projection / transclusion not only in component templates, but in all templates, ng-select’s template could be implemented like this:

<ng-container *ngTemplateOutlet="defaultValueContainerTemplate || valueContainerTemplate">
    <div class="ng-placeholder">{{placeholder}}</div>
    ...
</ng-container>

<ng-template #defaultValueContainerTemplate>
  <div class="ng-value-container">
    <ng-content></ng-content>
  </div>
</ng-template>

…but at the moment it is not possible.

Alternatively ng-select could provide tooltips out of the box, but it also feels like a bad solution to me. Some ng-select users would want a matTooltip, others—a plain title attribute etc. It would be unreasonable for ng-select to support all of these options.

I am currently going to try out the following approach: implement an Angular directive in the application code that would add a title attribute to the .ng-value-container element. This approach comes with a few problems:

• The directive will need to track the selected item separately in order to update the tooltip.
• This approach is limited to the title attribute. That is, one wouldn’t be able to inject a fully-fledged tooltip component like matTooltip.

But despite these limitations, I think this approach will work for us.

Update: There you go:

import { Directive, Input, AfterViewInit, ElementRef } from '@angular/core';

/**
 * Adds a tooltip for the selected item label in a **single-selection** ng-select.
 *
 * References:
 *   - https://github.com/ng-select/ng-select/issues/819#issuecomment-683709690
 *
 * The tooltip is a simple 'title' attribute.
 *
 * Usually you would want tooltips both for the selected item label and for select options.
 * To achieve this, use this directive in conjunction with a customized option label template:
 *
 *   <ng-select ... [(ngModel)]="selectedItem" [appTooltip]="selectedItem.Version">
 *     <ng-template ng-option-tmp let-item="item">
 *       <span class="ng-option-label" [attr.title]="item.Version">{{item.Version}}</span>
 *     </ng-template>
 *   </ng-select>
 *
 * For multiple-selection ng-select's, use a customized label template instead of this directive:
 *
 *   <ng-select ...>
 *     <ng-template ng-label-tmp let-item="item">
 *       <span class="ng-value-label" [attr.title]="item.Version">{{item.Version}}</span>
 *     </ng-template>
 *     <ng-template ng-option-tmp let-item="item">
 *       <span class="ng-option-label" [attr.title]="item.Version">{{item.Version}}</span>
 *     </ng-template>
 *   </ng-select>
 */
@Directive({
  // tslint:disable-next-line:directive-selector
  selector: 'ng-select[appTooltip]'
})
export class NgSelectSelectedItemTooltipDirective implements AfterViewInit {

  private _appTooltip: string;
  @Input() set appTooltip(value: string) {
    this._appTooltip = value;
    if (this.el.nativeElement)
      this.updateTooltipText();
  }
  get appTooltip() { return this._appTooltip; }

  constructor(private el: ElementRef) { }

  ngAfterViewInit() {
    if (this.appTooltip)
      this.updateTooltipText();
  }

  private updateTooltipText() {
    const elValueContainer = (this.el.nativeElement as HTMLElement).getElementsByClassName('ng-value-container')[0] as HTMLElement | undefined;
    if (elValueContainer)
      elValueContainer.title = this.appTooltip || '';
  }
}

[tavonanomn]

@earshinov how it can be done when it is a reusable component like the following example, where there are no html tags like div, span, etc.

<ng-select [items]=“collection” [appendTo]=“container” [placeholder]=“placeholder!” [multiple]=“multiple” [formControl]=“formControl” [bindLabel]=“getTextProperty()!” (blur)=“handleBlur()” (click)=“$event.stopPropagation()” > <ng-template *ngIf=“labelTemplate” ng-label-tmp let-item=“item” let-clear=“clear”> <ng-container *ngTemplateOutlet=“labelTemplate; context: { item: item, clear: clear }”></ng-container> </ng-template> <ng-template *ngIf=“optionTemplate” ng-option-tmp let-item=“item”> <ng-container *ngTemplateOutlet=“optionTemplate; context: { item: item }”></ng-container> </ng-template> </ng-select>