CODEWITHSUNDEEP
angularfrontendangular7ngx-bootstrap
Zeynep Ozen
Zeynep Ozen

Reputation: 1

How to display full text on hover in ngx-select when option text is too long?

I am using Angular 7 and have an ngx-select dropdown where the options are retrieved from a database. The code is as follows:

<div class="col-lg-6">
  <ngx-select class="form-control-file" noResultsFound="noResultsFound"
    placeholder="Choose" [items]="firstList" optionValueField="id"
    optionTextField="name" formControlName="firstList" [searchCallback]="localeSearch">
  </ngx-select>
</div>

The problem is that some of the option texts are too long to be fully displayed within the dropdown. I would like the full text to be shown when the user hovers over an option with the mouse.

How can I achieve this in ngx-select?

I prefer not to use Angular Material. Is there a way to achieve this in ngx-select?

Upvotes: 0

Views: 69

Answers (1)

Yassin Mo
Yassin Mo

Reputation: 610

To solve this problem you can use ngbPopover, you can get more details from this link : ngbPopover

usage:

suppose you have a span element :

<span ngbPopover="item.title" triggers="mouseenter:mouseleave" placement="bottom">Test</span>

Upvotes: 0

Related Questions