title: Showing dynamic tooltips on multiple-choice Select control
body: <p>Good morning: </p>
  
  <p>I'm trying to add a custom tooltip to every selected choice in an <code>Angular JS ui-select</code> control (<a href="https://github.com/angular-ui/ui-select" rel="nofollow noreferrer">Angular JS - ui-select</a>). </p>
  
  <p>The controler (<code>fc</code>) contains a function which, based on the <code>contact</code>'s <code>fullName</code> attribute, obtains a <code>string</code> with the associated tooltip's text.</p>
  
  <p>I can't seem to find how to have a different tooltip based on the choice the user is hovering on. </p>
  
  <p>The control's code excerpt is the following:  </p>
  
  <pre><code>&lt;ui-select multiple ng-model="fc.contacts" title="Contacts" on-select="fc.addContact($item)" on-remove="fc.removeContact($item)"&gt;
      &lt;ui-select-match placeholder="Add contact..."&gt;
          {{$item.fullName}}
      &lt;/ui-select-match&gt;
      &lt;ui-select-choices repeat="contact in fc.contacts | filter:$select.search"&gt;
          {{contact.fullName}}
      &lt;/ui-select-choices&gt;
  &lt;/ui-select&gt;
  </code></pre>
  
  <p>The tooltip we are trying to add is Angular UI Bootstrap's Tooltip control:</p>
  
  <p><code>uib-tooltip-html="fc.getTooltip($item.fullName)"</code></p>
  
  <p>The idea is that when hovering over <code>"Lorem Ipsum"</code> its associated tooltip will pop up, and when hovering over <code>"Foo Bar"</code>, its specific one will show.</p>
  
  <p><a href="https://i.stack.imgur.com/sehOk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sehOk.png" alt="Select Image"></a></p>
  
  <p>Thanks in advanced!</p>