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

Question

I have a ui-select-match element, and when I open an element and hang (select) by line, I need a hint to show the full contents of the line in case of overflow of text that is trimmed with a border.

It seems that something was supposed to be a ui-select function, but I could not find any reference to such a thing. So far I have found solutions that display all the text inside the line.

Thanks!

Answer 1

How about placing an title="{{selected.name}}"element containing a directive ui-select-match. The tooltip will be in any case, but not only when the 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