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

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

Answer 2

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

让md-tooltip始终有效？

2 个答案: