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

Question

令人惊讶的是，我在谷歌搜索时没有发现任何关于这个问题的信息。我的用例看起来相当简单，如果 kendo 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');

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

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

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

Answer 1

我不愿意发布这个答案，因为它有点 hack-y 并且使用了一些工具提示小部件的非公共 api/私有代码，并且需要抛光才能远程生产，但是......

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

工具提示上没有内置的之前显示事件。

但是，Tooltip 在内部使用了一个 Popup 小部件 (Popup widget documentation)。

Popup 小部件有一个打开事件，确实在 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);
  });

这是在做一些事情：

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

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

2. 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];
   }
   

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

See it in action(Kendo Dojo)

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

它还需要一些 CSS 等来使它看起来更漂亮等等。

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