动态调整Kendo UI提示框的位置？

Question

动态调整Kendo UI提示框的位置？

3

在谷歌搜索时我惊讶地没有找到任何关于这个问题的内容。我的应用场景似乎很简单，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用于检查工具提示是否超出窗口的右侧或左侧，并返回相反的方向，我希望工具提示位于相反的方向上以避免任何溢出。

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

我不确定如何动态更改工具提示的位置设置，使其在我的元素侧面有空间时能够自适应地调整位置。有人知道如何做到这一点吗？

- Tyler Dahle

看起来 setOptions 根本没有覆盖初始选项！！http://dojo.telerik.com/@marcio/oZayoDiT 真是太糟糕了。 - DontVoteMeDown

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- The Dread Pirate Stephen · Answer 1

我有些犹豫是否要发布这个答案，因为它有点“hack-y”，使用了Tooltip小部件的非公共API/私有代码，并需要进行修改才能与生产环境远程匹配，但是...

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

Tooltip没有内置的before Show事件。

但是，在内部，Tooltip使用Popup小部件( Popup小部件文档)。

Popup小部件具有一个open事件，该事件在Popup显示之前确实会触发，顺便提一下，该事件也是可取消的。

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

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

初始化Tooltip：

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

技巧 #1，强制创建内部弹出窗口小部件，以便我们可以将处理程序附加到其打开事件：

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;
}

技巧 #2: 将工具提示位置映射到弹出窗口位置。在内部，工具提示在 _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 将弹出窗口位置配置传递给弹出窗口。

在Kendo Dojo中查看它的实际效果

由于这个功能使用了Tooltip小部件源代码内部/私有结构，因此它很脆弱，如果Kendo更改，它就会出现问题。

它还需要一些CSS等来使其看起来更漂亮之类的东西。

如果我是在寻找这个功能，我会提交一个Kendo支持工单询问是否可能，因为他们非常乐意提供帮助，即使我们正在尝试不受支持的事情...但我是付费客户，所以这可能对您不可行。