为 fab 按钮添加背景颜色，以便对比度更好

Question

我正在使用 Angular 自己的材质实现，并使用带有工具提示功能的 fab 按钮。它很好用，但我想像谷歌在 Android 上的日历应用一样拥有它

那么如何修改代码以添加白色背景并让工具提示在没有鼠标的情况下显示？我是否必须为 fab 按钮编写一个新指令，或者我可以为此更改添加另一个指令？

Answer 1

查看https://material.angularjs.org/HEAD/demo/fabSpeedDial提供的更多选项演示

它使用md-autohide="false" 和md-visible="tooltipVisible" 属性来设置工具提示是否可见。然后，在控制器中，它会观察 FABs isOpen 变量的变化，并在短暂延迟（600 毫秒）后，将 tooltipVisible 设置为 true：

  // On opening, add a delayed property which shows tooltips after the speed dial has opened
  // so that they have the proper position; if closing, immediately hide the tooltips
  $scope.$watch('demo.isOpen', function(isOpen) {
    if (isOpen) {
      $timeout(function() {
        $scope.tooltipVisible = self.isOpen;
      }, 600);
    } else {
      $scope.tooltipVisible = self.isOpen;
    }
  });

至于工具提示的颜色，您应该能够在工具提示中添加自定义 CSS 类，然后使用该类更改背景颜色。比如：

md-tooltip.white-tooltip .md-content {
  background-color: white;
  color: black;
}