javascript - 使 intro.js 工具提示向右强制并使页面滚动

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

然后它决定将工具提示 float 在元素之上

有没有办法强制它使工具提示位于元素下方并使页面可滚动？(动态更改页面高度)(即使在实际的原始正文结束之后)

Answer 1

UX 工具提示定义 是一个绝对/固定定位的元素，当鼠标悬停在 UI 项目上时出现在光标附近 ( link )。恕我直言，您使用了错误的元素类型来完成一个简单的任务，通常是在当前脚手架中隐藏/显示元素。从模拟中我假设你已经在一个模态窗口中，在那个模态中放置你的工具提示 html 并显示/隐藏为一个简单的 html 对象，这样你就可以保留你需要的盒子模型和文档流，因为浏览器会为你做计算.