angularjs - 使 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'});
  }
});

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

现在，当我像这样向下滚动到某个区域时，他们每个人都会获得一个事件类:

// 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 中使用的表达式比仅仅引用一个字段更复杂，显然双向数据绑定(bind)将停止工作。

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