Question

令我惊讶的是，在谷歌上搜索时没有找到任何关于此问题的内容。我的用例看起来相当直接，如果它应该离开窗口，kendo ui工具提示会溢出窗口。

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

library(rvest)

get_url <- function(sym) {
  out <- paste0("https://finance.yahoo.com/quote/", sym, "/profile?p=", sym)
}

get_name <- function(sym) {
  url <- get_url(sym)
  name <- read_html(url) %>%
    html_nodes(xpath = 
      '//*[contains(concat( " ", @class, " " ), concat( " ", "Mend(40px)", " " ))]') %>%
    html_text()
  return(name)
}

get_ratio <- function(sym) {
  url <- get_url(sym)
  out <- read_html(url) %>%
    html_nodes(xpath = 
      '//*[contains(concat( " ", @class, " " ), concat( " ", "Ta(e)", " " ))]') %>%
    html_text()
  return(out[4])
}

get_assets <- function(sym) {
  url <- get_url(sym)
  out <- read_html(url) %>%
    html_nodes(xpath = 
      '//*[contains(concat( " ", @class, " " ), concat( " ", "Fl(end)", " " ))]') %>%
    html_text()
  return(out[6])
}

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

因此，对于工具提示从窗口右侧延伸的情况，它向左返回。所以我将setOptions设置为＆＃39; left＆＃39;，但工具提示不会改变位置。

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

Answer 1

我对发布这个答案犹豫不决，因为它有点黑客并且使用了Tooltip小部件的非公共api /私有代码，需要抛光才能进行远程生产，但......

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

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

但是，在工具提示内部使用弹出窗口小部件（Popup widget documentation）。

Popup小部件有一个打开的事件，在显示Popup之前触发，这也是可取消的FYI。

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

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

初始化工具提示：

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

HACK＃1，强制创建内部Popup小部件，以便我们可以将处理程序附加到其open事件：

tooltip._initPopup();

这使用＆＃34;私人＆＃34;第一次显示工具提示时调用的工具提示的方法，并设置其弹出成员。

附上我们的处理程序：

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在_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。

See it in action(Kendo Dojo)

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

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

如果这是我在寻找这个功能，我会提交剑道支持票，询问它是否可能，因为它们可以超级有用，即使我们试图做不受支持的事情......但我付钱客户可能无法为您服务。

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

1 个答案: