使用AngularJS UI使工具提示位置相对于窗口大小

Making tooltip position relative to windows size with AngularJS UI

本文关键字：位置 相对于 窗口大小 工具提示 AngularJS UI 使用      更新时间：2023-09-26

我正试图根据屏幕分辨率更改工具提示的位置（基于AngularJS Bootstrap UI），基本上第一个在移动设备上，第二个在其余设备上（最小宽度≥768px）：

tooltip-placement="top"

tooltip-placement="left"

我已经找到了一个使用jQuery（下一段代码）的解决方案，但我不知道如何在Angular中实现它。

$(window).on('resize', function() {
  var pos = ($(window).width() < 768) ? 'left' : 'top';
  $("#myDiv").tooltip({'placement': pos});
}).trigger('resize');

有什么提示吗？

您可以在作用域中定义一个函数来确定工具提示的位置。例如：

$scope.getTooltipPlacement = function () {
    return ($(window).width() < 768) ? 'left' : 'top';
};

然后，在需要工具提示的元素上，可以在tooltip-placement属性中调用此函数：

<a href="#" tooltip="My awesome tooltip" tooltip-placement="{{getTooltipPlacement()}}">Link</a>
相关文章：