I'm trying to add a custom tooltip to every selected choice in an Angular JS ui-select
control (Angular JS - ui-select).
The controler (fc
) contains a function which, based on the contact
's fullName
attribute, obtains a string
with the associated tooltip's text.
I can't seem to find how to have a different tooltip based on the choice the user is hovering on.
The control's code excerpt is the following:
<ui-select multiple ng-model="fc.contacts" title="Contacts" on-select="fc.addContact($item)" on-remove="fc.removeContact($item)">
<ui-select-match placeholder="Add contact...">
{{$item.fullName}}
</ui-select-match>
<ui-select-choices repeat="contact in fc.contacts | filter:$select.search">
{{contact.fullName}}
</ui-select-choices>
</ui-select>
The tooltip we are trying to add is Angular UI Bootstrap's Tooltip control:
uib-tooltip-html="fc.getTooltip($item.fullName)"
The idea is that when hovering over "Lorem Ipsum"
its associated tooltip will pop up, and when hovering over "Foo Bar"
, its specific one will show.
I know this question is just about a year old but I was trying to do something similar not to long ago. Posting my solution in case anyone else is interested.
I pretty much had what you have in the snippet with the exception that I just wrapped the select match in a span tag with Angular UI Bootstrap's tooltip attribute.
<ui-select-match placeholder="Select person...">
<span uib-tooltip="{{$item.fullname}}" tooltip-placement="bottom-right">{{$item.name}} <{{$item.email}}></span>
</ui-select-match>
I put together a JSFiddle for reference. To be clear I used the same versions for ui-select and bootstrap as the Multiple Selection demo from the documentation to match styling.