Question

我正在尝试将工具提示添加到工具栏内的按钮上。

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

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

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

<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-events css属性进行初始化的，这样可以确保父有指针事件而不是设置为none

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

CodePen Link

修复步骤：

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代码以从html上方删除pevents__initial类（其他方面，您的菜单将无效）：

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

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

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

1 个答案:

修复步骤：