如何在角度材料设计中的md-fab工具栏按钮中添加md-Tooltip:

Question

http://codepen.io/anon/pen/ggRQqR

我正在尝试将工具提示添加到工具栏中的工具提示.

但是,工具提示相互重叠,我没有按预期获得功能.

工具提示应仅在我将鼠标悬停在确切按钮上时显示.

我添加了两个屏幕截图,显示了奇怪的行为.

<div ng-controller="AppCtrl" ng-cloak="" class="tooltipdemoBasicUsage" ng-app="MyApp">

     <md-fab-toolbar class="md-fab md-accent md-fab-bottom-right">
        <md-fab-trigger class="align-with-text">
            <md-button aria-label="menu" class="md-fab md-primary">
                <md-icon md-svg-src="img/icons/ic_insert_drive_file_24px.svg"></md-icon>
                <md-tooltip>Options</md-tooltip>
            </md-button>
        </md-fab-trigger>
        <md-toolbar>
            <md-fab-actions class="md-toolbar-tools">
                <md-button aria-label="Save" class="md-icon-button" ng-click="vm.update()" ng-disabled="vm.loading || vm.data.length==0" >
                    <md-icon md-svg-src="img/icons/ic_photo_24px.svg" style="width: 24px; height: 24px;"></md-icon>
                    <md-tooltip>Save</md-tooltip>
                </md-button>
                <md-button aria-label="Reset" class="md-icon-button"  >
                   <md-icon md-svg-src="img/icons/ic_photo_24px.svg" style="width: 24px; height: 24px; "></md-icon> <md-tooltip>Refresh</md-tooltip>
                </md-button>

            </md-fab-actions>
        </md-toolbar>
    </md-fab-toolbar>

</div>

Answer 1

我有办法解决它.但这不是完美的解决方案.检查Angular-Material的代码后,我发现他们的工具提示是根据父的pointer-eventscss属性进行初始化的,这样可以确保父对象具有指针事件而不是设置为none.

我遇到了同样的问题,所以我通过在菜单的图标中添加指针事件并在页面加载后将其删除来修复它.

CodePen链接

修复步骤:

1)将此css代码添加到您的css文件中(确保它覆盖现有的css)

md-fab-toolbar md-toolbar.pevents__initial {
  pointer-events: initial;
}

2)pevents__initial将md-toolbar元素添加到元素中,该元素位于md-fab-toolbar:

<md-toolbar class='pevents__initial'>
    <md-fab-actions class="md-toolbar-tools">
    </md-fab-actions>
</md-toolbar>

3)添加此javascript代码pevents__initial从html上面删除类(其他方面你的菜单将无法正常工作):

setTimeout(function() {
   $('.pevents__initial').removeClass('pevents__initial');
}, 1000);

这只是一个让工具提示在fab工具栏中工作的黑客.需要更多地阅读官方代码才能找到更好的解决方案.但这对我现在很有用.