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!
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With