javascript - 使 Intro.js 工具提示响应

Question

我正在使用 intro.js引导用户在他们第一次登录时通过我的应用程序。这是一个很棒的工具并且可以正常工作，我看到的唯一缺点是 introjs-tooltip 元素没有响应。

正如您在下面看到的，工具提示在 px 中有一个 min-width 和 max-width，这真的不是很响应。这也使得我在某些步骤中包含的图像非常小并且有点无用，因为尺寸太小。

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
}