Make Intro.js tooltip responsiv

Question

I'm using intro.js to guide users through my application the first time they log in. It's a great tool and it works, the only downside I see is that the introjs-tooltip element is not responsiv.

As you can see below the tooltip has a min-width and max-width in px which really don't make it very responsiv. Also this makes the image I include in some of the steps really small and kind of useless, because of the small size.

CSS - Simplyfied

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

I have been working on this "issue" for a few days now, and can't figure it out.

So my questions are: Is there a way to make the tooltip use % instead of px without having to change to much in the intro.js file? If not, what would you guys recommend me to do?

Answer 1

You can provide own implementation for .introjs-tooltip in your custom css file:

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

or you can use an additional class eg: .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

In my case, "min-width" and "max-width" css rules are not working as expected, at least for floating tooltips in a responsive desing. In ended up doing the following. Maybe this is helpful for someone (tourTooltip is a custom class I defined for tooltips):

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

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