使 md-tooltip 始终处于活动状态？

Question

我正在尝试让一些工具提示始终处于活动状态，或者当我的鼠标靠近（而不是在按钮顶部）元素时能够激活它们。

现在我有这个设置：

<!-- BUTTONS SIDEBAR MENU -->
<div class="mini-sidebar-menu">
  <md-button aria-label="television" ng-click="television()" class="md-fab md-raised md-primary md-mini half">
    <md-tooltip md-direction="left" md-visible="showTooltip" md-autohide="false">
      scroll to 1
    </md-tooltip>
  </md-button>
  <md-button aria-label="mejor imagen" ng-click="mejorImagen()" class="md-fab md-raised md-primary md-mini half">
    <md-tooltip md-direction="left" md-visible="showTooltip" md-autohide="false">
      scroll to 2
    </md-tooltip>
  </md-button>
  <md-button aria-label="dvr" ng-click="dvr()" class="md-fab md-raised md-primary md-mini half">
    <md-tooltip md-direction="left" md-visible="showTooltip" md-autohide="false">
      scroll to 3
    </md-tooltip>
  </md-button>
  <md-button aria-label="ppv" ng-click="ppv()" class="md-fab md-raised md-primary md-mini half">
    <md-tooltip md-direction="left" md-visible="showTooltip" md-autohide="false">
      <span class="md-body">scroll to 4</span>
    </md-tooltip>
  </md-button>
  <md-button aria-label="paquetes" ng-click="paquetesTemporada()" class="md-fab md-raised md-primary md-mini half">
    <md-tooltip md-direction="left" md-visible="showTooltip" md-autohide="false">
      scroll to 5
    </md-tooltip>
  </md-button>
  <md-button aria-label="on demand" ng-click="onDemand()" class="md-fab md-raised md-primary md-mini half">
    <md-tooltip md-direction="left" md-visible="showTooltip" md-autohide="false">
      scroll to 6
    </md-tooltip>
  </md-button>
</div>

这些总是在屏幕的右侧，但它们只是点，我希望能够在鼠标靠近或向下滚动到页面的特定部分时显示工具提示。

现在，当它靠近屏幕右侧时，我将其作为鼠标事件：

var currentMousePos = { x: -1, y: -1 };
$scope.showTooltip = false;

$(document).mousemove(function(event) {
  currentMousePos.x = event.pageX;
  currentMousePos.y = event.pageY;

  if (currentMousePos.x > $(window).width() / 1.6) {
    $scope.showTooltip = true;
    console.log('mouse to the right: ' + currentMousePos);
    $('.mini-sidebar-menu').css({'opacity': '1'});
  } else {
    $scope.showTooltip = false;
    $('.mini-sidebar-menu').css({'opacity': '.1'});
  }
});

这会使不透明度升高，但同时我想在鼠标到达此位置时显示所有工具提示。

现在，当我像这样向下滚动到某个区域时，他们每个人都会得到一个活动 class：

// FUNCTION TO MAKE SIDE MENU BUTTON ACTIVE DEPENDING ON WHICH SECTION
$(window).scroll(function(){
  var windscroll = $(window).scrollTop();
  $('body .section').each(function(i){
    if ($(this).position().top <= windscroll + 85){
      $('.mini-sidebar-menu button.half').removeClass('active').addClass('md-mini');
      $('.mini-sidebar-menu button.half').eq(i).addClass('active').removeClass('md-mini');
    };
  });
});

同时，当他们到达页面的那个部分时，显示该特定按钮的工具提示会很好。

问题

如何在鼠标靠近边栏按钮时显示所有工具提示（不是悬停，只是关闭）。
如何在我向下滚动到属于该侧边栏按钮的特定部分时显示工具提示。

研究

我已阅读 https://material.angularjs.org/latest/api/directive/mdTooltip 上的文档并尝试修改选项但没有成功。

Answer 1

如果您想让它们始终处于活动状态，那么如果您使 md-visible 中使用的表达式比仅对字段的引用更复杂，那么双向数据绑定显然会停止工作。

双重否定 md-visible="!(!showTooltip)" 在大多数情况下应该可以解决问题。

Answer 2

您可以在 md-visible="angural_propertie" 之前使用 ng-if="boolean_value"。这允许组件绑定一次。

使 md-tooltip 始终处于活动状态？

Make md-tooltip always active?

angularjs

angular-material