javascriptangularjstooltipangular-ui-bootstrap

Showing dynamic tooltips on multiple-choice Select control


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.

Select Image


Solution

  • 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}} &lt;{{$item.email}}&gt;</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.