Question

我在使用editable-select将鼠标移动到每个项目时尝试显示工具提示。

    <a href="#" editable-select="user.status" e-multiple e-ng-options="s.value as s.text for s in statuses">
   click me
  </a>

点击链接＆＃34;点击我＆＃34;，可编辑选择预览。当我将鼠标移动到可编辑选择中的每个项目时，我想要显示工具提示。我试过在互联网上搜索但找不到我需要的东西。那么，谁对我的问题有任何理想呢？请帮助我......非常感谢。

Answer 1

有很多js插件可以做到这一点，但如果你想保持简单，请使用title锚属性。

实施例。 <a href="/some/link" title="Click Here">Link</a>

如果需要将其绑定到某个值，只需使用{}。

的常规角度绑定

Answer 2

作者希望看到：

enter image description here

如果我理解正确，那么库（使用作者）没有指令选项。所以，我用下面的代码编写指令（jsfiddle here）：

.directive('eTooltip', function($interval) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var key = attrs.eTooltip;
            var field = attrs.eTooltipField;

            function addTitles() {
                var options = element.next().find('option');
                do {
                     if (scope.$eval(key)) {
                        break;
                    }
                } while(scope = scope.$parent);

                if(!scope)
                    return;

                var myList = scope.$eval(key);
                for(var i=0; i<options.length; i++) {
                    if(!myList[i]) {
                        break;
                    }
                    options[i].setAttribute('title', myList[i][field]);
                }
            }

            function check() {
                var classes = element[0].classList;
                for(var i=0; i<classes.length; i++)
                    if(classes[i] == 'editable-hide')
                        return addTitles();
            }

            $interval(check, 1000);
        }
    }
});

Angular Bootstrap有一个工具提示。 http://angular-ui.github.io/bootstrap/#/tooltip 但它是一个大型图书馆。当然，存在其他的小库。你可以编写自己的模块，但这需要时间。 =）

Answer 3

最好的办法是找出editable-select指令使用的模板名称（该模板将包含在库中，其路径可以在指令源代码中找到）。然后，您可以复制模板，添加所需的工具提示功能，并使用$templateCache.put()（see documentation）将原始模板替换为代码中的新模板。

编辑：我自己查看了源代码，不幸的是，它并不那么容易。也许尝试在选择中提供您自己的<option>。

如何在editable-select中为每个项目移动鼠标时显示工具提示

3 个答案: