javascript - 动态调整 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');

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

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

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

Answer 1

我很犹豫是否要发布这个答案，因为它有点黑客攻击，并且使用了工具提示小部件的一些非公共(public) api/私有(private)代码，并且需要进行抛光才能远程生产，但是...

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

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

但是，工具提示在内部使用 Popup 小部件 ( Popup widget documentation )。

弹出窗口小部件有一个打开事件，该事件确实在显示弹出窗口之前触发，仅供引用，该事件也是可取消的。

因此，如果您可以将处理程序附加到工具提示内部弹出窗口的打开事件，则可以在显示弹出窗口之前对其进行更改。

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

初始化工具提示:

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();

这使用了工具提示的“私有(private)”方法，第一次显示工具提示时调用该方法并设置其弹出成员。

附加我们的处理程序:

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:将工具提示位置映射到弹出窗口位置。在内部，工具提示在 _initPopup() 期间使用私有(private)定义的映射数组(我已复制)来执行此操作:

   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 小部件源代码内部的几个内部/私有(private)结构，因此它很脆弱，如果 Kendo 发生更改，很可能会被破坏。

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

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