在多项选择控件上显示动态工具提示

Question

早上好：

我正在尝试为Angular JS ui-select控件（Angular JS - ui-select）中的每个选定选项添加自定义工具提示。

控制器（fc）包含一个函数，该函数根据contact的{​​{1}}属性获取带有相关工具提示文本的fullName。

我似乎无法根据用户悬停的选择找到如何使用不同的工具提示。

控件的代码摘录如下：

string

我们尝试添加的工具提示是Angular UI Bootstrap的工具提示控件：

<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>

我们的想法是，当鼠标悬停在uib-tooltip-html="fc.getTooltip($item.fullName)"上时，会弹出相关的工具提示，当鼠标悬停在"Lorem Ipsum"上时，会显示其特定的工具提示。

先谢谢！

Answer 1

我知道这个问题只有一岁左右，但我很久以前就试图做类似的事情。发布我的解决方案以防其他任何人感兴趣。

除了我刚刚在带有Angular UI Bootstrap's tooltip attribute的span标记中包含select匹配项之外，我几乎已经拥有了代码段中的内容。

<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>

我把JSFiddle放在一起作为参考。为了清楚起见，我使用与ui-select和bootstrap相同的版本作为文档中的Multiple Selection演示来匹配样式。