How to show tooltip on @ng-select/ng-select options

问题

I am using @ng-select/ng-select@2.3.6 in my application and i have a very long text in array.

So, the complete text not visible in dropdown list so I want to show the title/ tooltip over the each and every options

I tried,

let listArray = [{name: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s'}];

<ng-select placeholder="Select" (change)="onChange($event)">
      <ng-option *ngFor="let list of listArray" 
       title="{{list.name}}"> {{list.name}} </ng-option>
 </ng-select>

But no luck

回答1:

you can achieve tooltip solution using below code

<ng-select [items]="listArray" bindLabel="name" bindValue="name">
    <ng-template ng-option-tmp let-item="item">
    <div title="{{item.name}}">{{item.name}}</div>
    </ng-template>
</ng-select>

Thanks

回答2:

You can use @ng-bootstrap/ng-bootstrap library to display a tooltip in parallel with ng-select:

template:

<ng-select [ngbTooltip]="tipContent" container="body" placement="bottom" placeholder="Select" (change)="onChange($event)">
      <ng-option *ngFor="let list of listArray" title="{{list.name}}"> {{list.name}}  
     </ng-option>
</ng-select>

<ng-template #tipContent>{{listArray[0].name}}</ng-template>

ts:

listArray = [
    {name: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s"}
];

Demo

I added a demo using only bootstrap with no external libraries. Hover on the options to see the tooltip (takes a couple of seconds until it is displayed): New Demo

回答3:

You can put a template inside the <ng-option>, and add the directive ng-option-tmp:

<ng-select [items]="listArrayManyElements" placeholder="Select" [(ngModel)]="Selected" 
           bindLabel="name" bindValue="name">
    <ng-template ng-option-tmp let-item="item">
        <div [title]="item.name">{{item.name}}</div>
    </ng-template>
</ng-select>

I've updated your stackblitz

回答4:

You can create custom directive like that:

import { ContentChild, Directive, ElementRef, OnInit } from '@angular/core';
import { NgSelectComponent } from "@ng-select/ng-select";

@Directive({
selector: '[admSelectTitle]'
})

export class SelectTitleDirective implements OnInit {

@ContentChild(NgSelectComponent) select: NgSelectComponent;

@ContentChild(NgSelectComponent, { read: ElementRef }) selectNative: ElementRef;

/**
 * @inheritDoc
 */
ngOnInit() {
    if (!this.select) {
        return;
    }
    const nativeElement = this.selectNative.nativeElement;
    nativeElement.addEventListener("mouseover", function() {
        const listOfPickedElements = nativeElement.querySelectorAll('.ng-value-label.ng-star-inserted');
        listOfPickedElements.forEach((el) => {
            el.setAttribute('title', el.innerHTML);
        })

        const listOfAvailableOptions = nativeElement.querySelectorAll('.ng-dropdown-panel-items.scroll-host .ng-option.ng-option-marked');
        listOfAvailableOptions.forEach((v) => {
            v.setAttribute('title', v.innerText)
        })

    })
}
}

After that you can simply use it:

<ng-select admSelectTitle [items]="yourItems" bindLabel="name" bindValue="id" class="anyClass" formControlName="anyName" [multiple]="true">
                    <ng-template ng-option-tmp let-item="item">
                        {{ item.name }}
                    </ng-template>
                </ng-select>

now there are tooltips on ng-select and on ng-options elements. Sorry for bad English=)

来源：https://stackoverflow.com/questions/51683400/how-to-show-tooltip-on-ng-select-ng-select-options

标签

angular

angular6