Angular UI-Select: How to add a tooltip for text overflow?

Question

I have a ui-select-match element, and when opening the element and hovering (highlighting) over a row I need a tooltip to show the full content of the row in case of text overflow that is cut off by the border.

It seems like something that should have been a feature of ui-select but I couldn't find any reference for such a thing. So far I only found solutions that show the entire text inside the row.

Thanks!

Michel · Accepted Answer · 2015-09-20 12:44:55Z

7

What about putting title="{{selected.name}}" on the element holding the ui-select-match directive. The tooltip will be in any case though, not only when text overflows.

Code:

<ui-select ng-model="address.selected"
             theme="bootstrap"
             ng-disabled="disabled"
             reset-search-input="false"
             style="width: 300px;">
    <ui-select-match title="{{address.selected.formatted_address}}" placeholder="Enter an address...">{{$select.selected.formatted_address}}</ui-select-match>
    <ui-select-choices repeat="address in addresses track by $index"
             refresh="refreshAddresses($select.search)"
             refresh-delay="0">
      <div ng-bind-html="address.formatted_address | highlight: $select.search"></div>
    </ui-select-choices>
</ui-select>

See plnkr

answered Sep 20, 2015 at 12:44

Michel

28.6k6 gold badges67 silver badges72 bronze badges

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

1 Comment

Shaycobs Over a year ago

Thanks for your answer. I thought about it as an option but I need the tooltip to show only with text overflows.

Collectives™ on Stack Overflow

Angular UI-Select: How to add a tooltip for text overflow?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related