让Intro.js工具提示响应

Question

我正在使用intro.js在用户首次登录时引导用户浏览我的应用程序。这是一个很棒的工具而且有效，我看到的唯一缺点就是introjs-tooltip元素不响应。

正如您在下面看到的那样，工具提示在min-width中有一个max-width和px，这实际上并没有让它变得非常响应。这也使得我在某些步骤中包含的图像非常小而且没用，因为它的尺寸很小。

CSS - 简化

.introjs-tooltip {
    position: absolute;
    visibility: visible;
    padding: 10px;
    min-width: 200px;
    max-width: 300px;
}

我已经在这个“问题”上工作了几天，但是无法理解。

所以我的问题是：有没有办法让tooltip使用%而不是px而不必在intro.js文件中更改？如果没有，你们会建议我做什么？

Answer 1

您可以在自定义css文件中为.introjs-tooltip提供自己的实现：

.introjs-tooltip {
    min-width: 100%; // change to desired
    max-width: 100%; // change to desired
}

或者您可以使用其他课程，例如：.tooltip-large：

HTML

<div class="introjs-tooltip tooltip-large">
   ...
</div>

CSS

.tooltip-large {
  min-width: 100%; // change to desired
  max-width: 100%; // change to desired
}