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

Question

早上好:

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

Controller (fc) 包含一个函数，该函数根据 contact 的 fullName 属性获取 string 与关联的工具提示文本。

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

该控件的代码摘录如下:

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

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

uib-tooltip-html="fc.getTooltip($item.fullName)"

这个想法是，当鼠标悬停在“Lorem Ipsum”上时，会弹出其相关的工具提示，而当鼠标悬停在“Foo Bar”上时，会显示其特定的工具提示。

提前致谢!

Answer 1

我知道这个问题已经问了大约一年了，但不久前我正在尝试做类似的事情。发布我的解决方案以防其他人感兴趣。

我几乎拥有了代码片段中的内容，除了我只是将选择匹配项包装在带有 Angular UI Bootstrap's tooltip attribute 的 span 标记中。 。

<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 使用了与文档中的多重选择演示相同的版本来匹配样式。