Question

我在HTML5 / AngularJS / Bootstrap中有一个UI页面。该页面有一些下拉列表，这些下拉列表由来自服务调用的controller.js填充。我在解析这些信息并将其输入多选下拉列表时没有任何问题。然而，作为我们的管理层和最终用户的大脑信任已经决定，除了显示每个可选选项的缩减的下拉菜单之外，他们还希望当用户将鼠标悬停在每个选项旁边时，弹出描述显示在每个选项旁边。除了我的个人意见，我不能告诉他们，直到我至少能告诉他们它的样子。

如果这只是纯粹的css，随着面板的下降，我可以看到添加一些鼠标悬停式面板/弹出窗口这将是多么容易。但是我使用这个angularjs-dropdown-multiselect.js插件......到目前为止效果很好，但我不知道如何添加它。在js中有一些代码导致选项稍微向右滑动，并在用户将鼠标悬停在其上时改变颜色，但对该事件的工作原理不够了解，我甚至不知道在哪里用于查找鼠标悬停的更改的代码。

作为参考，插件来自这里： http://dotansimha.github.io/angularjs-dropdown-multiselect/#/

我可以发布js代码，如果有人想看一下，但我不确定这是否是这个问题的必要部分...我的第一个想法就是试试捕获该事件并可能更改显示文本？

我现在一直在研究这个好日子，我找不到适用于这个难题所有部分的答案......有没有人有任何经验或想法如何添加下拉菜单的功能类型？或者这是否接近我操作领域的情况，我可以更好地操作一个文本框，onFocus可能会显示一个下拉列表 - 模仿面板，然后可以在项目上显示子面板？

Answer 1

由于我找不到以编程方式在angularjs-dropdown-multiselect指令上添加工具提示的方法，我假设您愿意扩展它，然后我创建了一个快速小提琴（基于可用的示例）来添加角度-ui工具提示创建项目。

这是工具提示的链接，将解释如何定位它 https://angular-ui.github.io/bootstrap/#/tooltip

这个小提琴会让你知道从哪里开始：https://jsfiddle.net/silvioamaral/ghcma6z3/1/

on ln 232，在<a>中创建<li>：

template += '<a role="menuitem" tabindex="-1" ng-click="setSelectedItem(getPropertyForObject(option,settings.idProp))" >';

只需添加angular-ui指令：

UIB-工具提示= “{{选项}}”

像

template += '<a role="menuitem" tabindex="-1" ng-click="setSelectedItem(getPropertyForObject(option,settings.idProp))"  uib-tooltip="{{option}}">';

我添加到锚点，因为其他元素（<li> <div>）似乎绑定了诸如组/复选框等存在的选项。

希望有所帮助

编辑：语法和jsfiddle链接

用于angularJS多选选项的悬停弹出窗口

1 个答案: