Question

在intro.js中添加大型工具提示时，它会执行以下操作来计算是否有空间将工具提示放在顶部，底部，左侧，右侧：

/*
* auto determine position 
*/

// Check for space below
if (targetElementRect.bottom + tooltipHeight + tooltipHeight > windowSize.height) {
  _removeEntry(possiblePositions, "bottom");
}

// Check for space above
if (targetElementRect.top - tooltipHeight < 0) {
  _removeEntry(possiblePositions, "top");
}

// Check for space to the right
if (targetElementRect.right + tooltipWidth > windowSize.width) {
  _removeEntry(possiblePositions, "right");
}

// Check for space to the left
if (targetElementRect.left - tooltipWidth < 0) {
  _removeEntry(possiblePositions, "left");
}

然后决定将工具提示浮动在元素here is the full example project

的顶部

有没有一种方法可以强迫它使工具提示位于元素下方并使页面可滚动？（动态更改页面高度）（即使在实际的原始主体已经确定之后）

Answer 1

UX工具提示定义是一个绝对/固定位置元素，当悬停UI项时出现在光标附近（link）。恕我直言，您使用错误的元素类型来完成一个简单的任务，通常是在当前脚手架中隐藏/显示元素。从模拟中，我认为您已经处于模式窗口中，在该模式中，您的工具提示html和显示/隐藏为简单的html对象，因此您可以保留所需的框模型和文档流，因为浏览器将为您进行计算

使intro.js工具提示位于右侧，并使页面滚动

1 个答案: