javascript - 动态调整 Kendo UI 工具提示位置？

Question

令人惊讶的是，在谷歌搜索时，我没有发现任何关于这个问题的信息。我的用例似乎相当简单，如果剑道 ui 工具提示应该离开窗口，它就会溢出窗口。

因此，我想将工具提示保留在元素的右侧或左侧。我的工具提示设置如下：

var clickTooltip = $('#some-element').kendoTooltip({
                filter: '.tooltip-eles',
                position: 'left',
                width: 250,
                showOn: 'click',
                autoHide: false,
                content: kendo.template($('#tooltipTemplate').html()),
                show: function(e) {
                    console.log(e);
                    var tooltipElement = e.sender.popup.element;
                    var tooltipPosition = isTooltipInBounds(tooltipElement);
                    e.sender.setOptions({position: tooltipPosition});

                }
            }).data('kendoTooltip');

其中 isTooltipInBounds 检查工具提示是否离开窗口的右侧或左侧，并返回相反的方向，我希望工具提示处于打开状态以避免任何溢出。

因此，对于工具提示超出窗口右侧的情况，它会返回左侧。所以我设置选项并将位置设置为“左”，但工具提示不会改变位置。

我不确定如何能够将工具提示的位置设置动态更改到元素有空间的一侧。有谁知道你会怎么做？

score 0 · Accepted Answer

我很犹豫发布这个答案，因为它有点hack-y并且使用了Tooltip小部件的一些非公共API/私有代码，并且需要抛光才能远程生产，但是......

您当前代码的问题是 Tooltip 的 show 事件在Tooltip 已经显示后触发，因此尝试在此处更改位置为时已晚。

Tooltip 上没有内置的before Show 事件。

但是，在内部，工具提示正在使用弹出小部件（弹出小部件文档）。

Popup 小部件有一个 open 事件，该事件会在显示 Popup 之前触发，这也是可取消的，仅供参考。

因此，如果您可以将处理程序附加到 Tooltip 的内部 Popup 的 open 事件，您可以在 Popup 显示之前对其进行更改。

不幸的是，Tooltip 的内部 Popup 小部件直到 Tooltip 第一次显示时才构建，这使得在设置 Tooltip 时很难附加处理程序。

初始化工具提示：

var tooltip = $('#some-element').kendoTooltip({
    position: 'left',
    width: 250,
    showOn: 'click',
    autoHide: false,
    content: "It's the tooltip!",
}).data('kendoTooltip');

HACK #1，强制创建内部 Popup 小部件，以便我们可以将处理程序附加到它的打开事件：

tooltip._initPopup();

这使用了 Tooltip 的“私有”方法，它在 Tooltip 首次显示时调用该方法并设置其弹出成员。

附加我们的处理程序：

tooltip.popup.bind("open", function (e) {
    // Figure out position...
    var tooltipPosition = isTooltipInBounds();
    console.log(tooltipPosition);

    // Map tooltip position to Popup position using mapping defined inside Tooltip widget code...
    var popupPosition = mapTooltipPostionToPopPosition(tooltipPosition);

    // Set position of Popup before it is shown.
    e.sender.setOptions(popupPosition);
  });

这是在做一些事情：

执行你的逻辑来确定工具提示的位置，我为了好玩而用随机数生成器伪造了它。您将需要以某种方式在此处获取工具提示目标以执行您的实际逻辑。

function isTooltipInBounds() {
    var tooltipPosition;
    switch (Math.floor(Math.random() * 2) + 1) {
        case 1:
          tooltipPosition = "left";
          break;
        case 2:
          tooltipPosition = "right";
          break;
    };

    return tooltipPosition;
}

HACK #2：将 Tooltip 位置映射到 Popup 位置。在内部，工具提示在 _initPopup() 期间使用私有定义的映射数组（我已复制）执行此操作：

function mapTooltipPostionToPopPosition(tooltipPosition) {
    var POSITIONS = {
        bottom: {
            origin: 'bottom center',
            position: 'top center'
        },
        top: {
            origin: 'top center',
            position: 'bottom center'
        },
        left: {
            origin: 'center left',
            position: 'center right',
            collision: 'fit flip'
        },
        right: {
            origin: 'center right',
            position: 'center left',
            collision: 'fit flip'
        },
        center: {
            position: 'center center',
            origin: 'center center'
        }
    };

  return POSITIONS[tooltipPosition];
}

使用 setOptions 将 Popup 位置配置传递给 Popup。

实际操作（剑道道场）

由于这使用了 Tooltip 小部件源代码内部的几个内部/私有结构，因此它很脆弱，并且如果 Kendo 发生更改，可能会损坏。

它还需要一些 CSS 等以使其看起来更好等等。

如果这是我在寻找此功能，我会提交 Kendo 支持票，询问是否有可能，因为它们可能会非常有帮助，即使我们正在尝试做不受支持的事情......但我是付费客户，所以可能你不可能。

javascript - 动态调整 Kendo UI 工具提示位置？

1 回答 1

Related

Reference