使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
}

Answer 2

在我的例子中，"min-width“和"max-width”css规则没有像预期的那样工作，至少对于响应式设计中的浮动工具提示是这样的。最终完成了以下操作。也许这对某些人有帮助(tourTooltip是我为工具提示定义的自定义类)：

/* Size < Small */
@media screen and (max-width: 756px) {
  .tourTooltip {
    min-width: 300px;
  }
}

/* Size > Small */
@media screen and (min-width: 756px) {
  .tourTooltip {
    min-width: 500px;
  }
}