动态调整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检查工具提示是离开窗口的右边还是左边，并返回相反的方向，我希望工具提示在上面，以避免任何溢出。

因此，对于工具提示从窗口右侧延伸的情况，它返回左侧。因此，我setOptions并把位置作为‘左’，但工具提示不改变位置。

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

Answer 1

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

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

在工具提示中没有内置的_before_Show事件。

但是，在内部，工具提示使用的是弹出小部件(弹出小部件文档)。

弹出窗口小部件有一个打开的事件，它会在弹出窗口显示之前触发，这也是可取消的FYI。

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

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

初始化工具提示：

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

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

tooltip._initPopup();

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

附加我们的处理程序：

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. 执行您的逻辑来确定工具提示的位置，这是我为了好玩而用随机数生成器伪造的。您需要在这里以某种方式获得工具提示目标，以执行实际的逻辑。 函数isTooltipInBounds() { var tooltipPosition；switch (Math.floor(Math.random() * 2) + 1) { case 1: tooltipPosition = "left"；tooltipPosition；case 2: tooltipPosition = "right"；tooltipPosition；}；返回tooltipPosition；}
2. HACK #2:将工具提示位置映射到弹出位置。在内部，工具提示在_initPopup()期间使用一个私下定义的映射数组(我已经复制了该数组)执行此操作： 函数mapTooltipPostionToPopPosition(tooltipPosition) { var要塞={底部：{本源：‘底部中心’，位置：‘顶部中心’}，顶部：{原点：‘顶部中心’，位置：‘底部中心’}，左边：{原点：‘中心左侧’，位置：‘中间右’，碰撞：‘适合翻转’}，右：{原点：‘中央右’，位置：‘中间左’，碰撞：‘适合翻转’}，中间：{位置：‘中心中心’，来源：‘中心’} }；返回POSITIONStooltipPosition；}
3. 使用setOptions将弹出位置配置传递给弹出窗口。

在行动中看到它(Kendo Dojo)

因为这是使用工具提示小部件源代码中的一些内部/私有结构，所以如果Kendo更改，它是脆弱的，并且会崩溃。

它还需要一些CSS，等等，以使它看起来更好和诸如此类。

如果这是我在寻找这个功能，我会提交Kendo支持票，询问它是否有可能，因为它们可能非常有用，即使我们试图做不受支持的things....but，我是一个付费客户，所以这对您来说是不可能的。