Question

当用户将鼠标悬停在特定单词上时，是否有任何包或方式显示小html设计？就像你在用户名上悬停的Facebook一样，你可以在小设计中看到他的封面和头像。

Answer 1

使用<mat-menu>角度材料。

link：https://material.angular.io/components/menu/overview。

Answer 2

您可以使用popover添加自定义模板示例链接：example link

<强> HTML

<div ng-app="customDirectives">
    <div> <span custom-popover popover-html="Some Popover Text" popover-placement="bottom" popover-label="Label"></span>

    </div>
</div>

<强>指令

customDirectives = angular.module('customDirectives', []);
customDirectives.directive('customPopover', function () {
    return {
        restrict: 'A',
        template: '<span>{{label}}</span>',
        link: function (scope, el, attrs) {
            scope.label = attrs.popoverLabel;
            $(el).popover({
                trigger: 'hover',
                html: true,
                content: attrs.popoverHtml,
                placement: attrs.popoverPlacement
            });
        }
    };
});

angular.module('CustomComponents', ['customDirectives']);

在鼠标悬停角度2上显示自定义html

2 个答案: