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

Question

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?

May I know what version of ngx-select you had used with ?

bottletyre
– bottletyre

2024-08-28 00:25:34 +00:00
Commented Aug 28, 2024 at 0:25 — bottletyre
– bottletyre, Commented Aug 28, 2024 at 0:25
"ngx-select-ex": "^3.6.10",

Zeynep Ozen
– Zeynep Ozen

2024-08-29 14:29:48 +00:00
Commented Aug 29, 2024 at 14:29 — Zeynep Ozen
– Zeynep Ozen, Commented Aug 29, 2024 at 14:29

Yassin Mo · Accepted Answer · 2024-08-28 07:44:33Z

0

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>

answered Aug 28, 2024 at 7:44

Yassin Mo

6122 gold badges5 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related