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

Question

早上好：

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

控制器 (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>

我们尝试添加的工具提示是AngularUIBootstrap的工具提示控件：

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

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

在此先致谢！

Answer 1

我知道这个问题只有一年左右的历史，但不久前我正在尝试做类似的事情。发布我的解决方案以防其他人感兴趣。

除了我只是将 select 匹配包含在带有 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 使用了与文档中的多选演示相同的版本来匹配样式。

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

Showing dynamic tooltips on multiple-choice Select control

javascript

tooltip

angularjs

angular-ui-bootstrap